
<!DOCTYPE HTML>
<html lang="zh-hans" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>介绍 · 👨🏽‍💻前端漫游指南</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.3">
        <meta name="author" content="WuXiaolong">
        
        
    
    <link rel="stylesheet" href="gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="gitbook/gitbook-plugin-donate/plugin.css">
                
            
                
                <link rel="stylesheet" href="gitbook/gitbook-plugin-splitter/splitter.css">
                
            
                
                <link rel="stylesheet" href="gitbook/gitbook-plugin-prism/prism.css">
                
            
                
                <link rel="stylesheet" href="gitbook/gitbook-plugin-toggle-chapters/toggle.css">
                
            
                
                <link rel="stylesheet" href="gitbook/gitbook-plugin-search-plus/search.css">
                
            
                
                <link rel="stylesheet" href="gitbook/gitbook-plugin-fontsettings/website.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="Base/" />
    
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="输入并搜索" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    
    
    

    

    
        
        
    
        <li class="chapter active" data-level="1.1" data-path="./">
            
                <a href="./">
            
                    
                        <b>1.1.</b>
                    
                    介绍
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="Base/">
            
                <a href="Base/">
            
                    
                        <b>1.2.</b>
                    
                    前端基础
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.1" data-path="Base/">
            
                <a href="Base/">
            
                    
                        <b>1.2.1.</b>
                    
                    原生js系列
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.1.1" data-path="Base/手写call1.html">
            
                <a href="Base/手写call1.html">
            
                    
                        <b>1.2.1.1.</b>
                    
                    类型转换
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.1.2" data-path="Base/EventLoop.html">
            
                <a href="Base/EventLoop.html">
            
                    
                        <b>1.2.1.2.</b>
                    
                    EventLoop
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.2.2" data-path="Base/CSS.html">
            
                <a href="Base/CSS.html">
            
                    
                        <b>1.2.2.</b>
                    
                    CSS系列
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.2.1" data-path="Base/布局系列.html">
            
                <a href="Base/布局系列.html">
            
                    
                        <b>1.2.2.1.</b>
                    
                    布局系列
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="Design/">
            
                <a href="Design/">
            
                    
                        <b>1.3.</b>
                    
                    前端设计模式
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1" data-path="Design/工程模式.html">
            
                <a href="Design/工程模式.html">
            
                    
                        <b>1.3.1.</b>
                    
                    工厂模式
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.2" data-path="Design/单一模式.html">
            
                <a href="Design/单一模式.html">
            
                    
                        <b>1.3.2.</b>
                    
                    单一模式
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="DiyCode/">
            
                <a href="DiyCode/">
            
                    
                        <b>1.4.</b>
                    
                    手撕代码
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.4.1" data-path="DiyCode/手写call.html">
            
                <a href="DiyCode/手写call.html">
            
                    
                        <b>1.4.1.</b>
                    
                    手写call
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.2" data-path="DiyCode/手写bind.html">
            
                <a href="DiyCode/手写bind.html">
            
                    
                        <b>1.4.2.</b>
                    
                    手写bind
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="Algorithm/">
            
                <a href="Algorithm/">
            
                    
                        <b>1.5.</b>
                    
                    前端算法
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.1" data-path="Algorithm/前端算法.html">
            
                <a href="Algorithm/前端算法.html">
            
                    
                        <b>1.5.1.</b>
                    
                    前端算法
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.2" data-path="Algorithm/统计算法的执行效率和资源消耗.html">
            
                <a href="Algorithm/统计算法的执行效率和资源消耗.html">
            
                    
                        <b>1.5.2.</b>
                    
                    统计算法的执行效率和资源消耗
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.3" data-path="Algorithm/从Chrome V8源码看JavaScript数组.html">
            
                <a href="Algorithm/从Chrome V8源码看JavaScript数组.html">
            
                    
                        <b>1.5.3.</b>
                    
                    从Chrome V8源码看JavaScript数组
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.4" data-path="Algorithm/LRU算法.html">
            
                <a href="Algorithm/LRU算法.html">
            
                    
                        <b>1.5.4.</b>
                    
                    LRU算法
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.5" data-path="Algorithm/链表原来如此简单.html">
            
                <a href="Algorithm/链表原来如此简单.html">
            
                    
                        <b>1.5.5.</b>
                    
                    链表原来如此简单
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="Vue/">
            
                <a href="Vue/">
            
                    
                        <b>1.6.</b>
                    
                    Vue知识点
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.6.1" data-path="Vue/Proxy 基本使用与defineProperty.html">
            
                <a href="Vue/Proxy 基本使用与defineProperty.html">
            
                    
                        <b>1.6.1.</b>
                    
                    Proxy 基本使用与defineProperty
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.2" data-path="Vue/面试题串讲_vue.html">
            
                <a href="Vue/面试题串讲_vue.html">
            
                    
                        <b>1.6.2.</b>
                    
                    面试题串讲_vue
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.7" data-path="React/">
            
                <a href="React/">
            
                    
                        <b>1.7.</b>
                    
                    React知识点
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.7.1" data-path="React/setState解析.html">
            
                <a href="React/setState解析.html">
            
                    
                        <b>1.7.1.</b>
                    
                    setState解析
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.2" data-path="React/Fetch异步中止.html">
            
                <a href="React/Fetch异步中止.html">
            
                    
                        <b>1.7.2.</b>
                    
                    Fetch异步中止
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.3" data-path="React/面试题串讲_react.html">
            
                <a href="React/面试题串讲_react.html">
            
                    
                        <b>1.7.3.</b>
                    
                    面试题串讲_react
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.8" data-path="ReactNative/">
            
                <a href="ReactNative/">
            
                    
                        <b>1.8.</b>
                    
                    ReactNative
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.8.1" data-path="ReactNative/RN分包机制.html">
            
                <a href="ReactNative/RN分包机制.html">
            
                    
                        <b>1.8.1.</b>
                    
                    RN分包机制
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            本书使用 GitBook 发布
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="." >介绍</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div class="search-plus" id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <blockquote>
<p> &#x539F;&#x6587;&#x5730;&#x5740; <a href="https://zhuanlan.zhihu.com/p/117490792" target="_blank">https://zhuanlan.zhihu.com/p/117490792</a></p>
</blockquote>
<h2 id="&#x524D;&#x8A00;"><strong>&#x524D;&#x8A00;</strong></h2>
<p>&#x6211;&#x66FE;&#x7ECF;&#x4E00;&#x5EA6;&#x5F88;&#x8FF7;&#x832B;&#xFF0C;&#x5728;&#x5B66;&#x4E86; Vue&#x3001;React &#x7684;&#x5B9E;&#x6218;&#x5F00;&#x53D1;&#x548C;&#x5E94;&#x7528;&#x4EE5;&#x540E;&#xFF0C;&#x597D;&#x50CF;&#x9047;&#x5230;&#x4E86;&#x4E00;&#x4E9B;&#x74F6;&#x9888;&#xFF0C;&#x4E0D;&#x77E5;&#x9053;&#x8BE5;&#x600E;&#x6837;&#x7EE7;&#x7EED;&#x6DF1;&#x5165;&#x4E0B;&#x53BB;&#x3002;&#x76F8;&#x4FE1;&#x8FD9;&#x4E5F;&#x662F;&#x5F88;&#x591A;&#x4E00;&#x4E24;&#x5E74;&#x7ECF;&#x9A8C;&#x7684;&#x524D;&#x7AEF;&#x5DE5;&#x7A0B;&#x5E08;&#x6240;&#x9047;&#x5230;&#x5171;&#x540C;&#x95EE;&#x9898;&#xFF0C;&#x8FD9;&#x7BC7;&#x6587;&#x7AE0;&#xFF0C;&#x7B14;&#x8005;&#x60F3;&#x7ED3;&#x5408;&#x81EA;&#x5DF1;&#x7684;&#x4E00;&#x4E9B;&#x6210;&#x957F;&#x7ECF;&#x5386;&#x6574;&#x7406;&#x51FA;&#x4E00;&#x4E9B;&#x8DEF;&#x7EBF;&#xFF0C;&#x5E2E;&#x52A9;&#x5404;&#x4F4D;&#x521D;&#x4E2D;&#x7EA7;&#x524D;&#x7AEF;&#x5DE5;&#x7A0B;&#x5E08;&#x5C11;&#x8D70;&#x4E00;&#x4E9B;&#x5F2F;&#x8DEF;&#x3002;</p>
<p>&#x7B14;&#x8005;&#x6BD5;&#x4E1A;&#x4E8E;&#x4E00;&#x4E2A;&#x5F88;&#x666E;&#x901A;&#x7684;&#x672C;&#x79D1;&#x5B66;&#x6821;&#xFF0C;&#x975E;&#x8BA1;&#x7B97;&#x673A;&#x4E13;&#x4E1A;&#xFF0C;17 &#x5E74;&#x7684;&#x65F6;&#x5019;&#x521A;&#x6BD5;&#x4E1A;&#x7684;&#x65F6;&#x5019;&#x8FD8;&#x4E0D;&#x77E5;&#x9053;&#x81EA;&#x5DF1;&#x7684;&#x65B9;&#x5411;&#x5728;&#x54EA;&#xFF08;&#x5B9E;&#x4E60;&#x505A;&#x8FC7;&#x9500;&#x552E;&#x3001;&#x8FD0;&#x8425;&#x3001;&#x63A8;&#x5E7F;&#xFF09;&#x3002;&#x540E;&#x6765;&#x673A;&#x7F18;&#x5DE7;&#x5408;&#x8D70;&#x4E0A;&#x4E86;&#x5F00;&#x53D1;&#x8FD9;&#x6761;&#x8DEF;&#xFF0C;&#x7B2C;&#x4E00;&#x5E74;&#x7684;&#x65F6;&#x5019; Java &#x548C;&#x524D;&#x7AEF;&#x90FD;&#x505A;&#xFF0C;&#x6162;&#x6162;&#x53D1;&#x73B0;&#x4E86;&#x81EA;&#x5DF1;&#x7684;&#x5174;&#x8DA3;&#x6240;&#x5728;&#x8F6C;&#x5411;&#x524D;&#x7AEF;&#x3002;&#x7B2C;&#x4E8C;&#x5E74;&#x7684;&#x65F6;&#x5019;&#x8DF3;&#x69FD;&#x6765;&#x5230;&#x676D;&#x5DDE;&#xFF0C;&#x5F00;&#x59CB;&#x524D;&#x7AEF;&#x5DE5;&#x7A0B;&#x5E08;&#x7684;&#x751F;&#x6DAF;&#x3002;</p>
<p>&#x76EE;&#x524D;&#x5F00;&#x53D1;&#x7ECF;&#x9A8C;&#x4E00;&#x5171;&#x662F; 2 &#x5E74; 8 &#x4E2A;&#x6708;&#xFF0C;&#x76EE;&#x524D;&#x5E26;&#x4E00;&#x4E2A; 5 &#x4EBA;&#x7684;&#x56E2;&#x961F;&#xFF0C;&#x524D;&#x4EFB;&#x7684;&#x7EC4;&#x957F;&#x8BA9;&#x6211;&#x5E26;&#x9886;&#x56E2;&#x961F;&#x7684;&#x4E3B;&#x8981;&#x539F;&#x56E0;&#x662F;&#x4E2A;&#x4EBA;&#x6280;&#x672F; + &#x6C9F;&#x901A;&#x80FD;&#x529B;&#x76F8;&#x5BF9;&#x8F83;&#x597D;&#xFF0C;&#x4F46;&#x662F;&#x5728;&#x6280;&#x672F;&#x80FD;&#x529B;&#x6210;&#x957F;&#x7684;&#x80CC;&#x540E;&#x9700;&#x8981;&#x600E;&#x4E48;&#x53BB;&#x8D70;&#x5462;&#xFF0C;&#x76F8;&#x4FE1;&#x6709;&#x5F88;&#x591A;&#x5C0F;&#x4F19;&#x4F34;&#x4F1A;&#x8FF7;&#x5931;&#x65B9;&#x5411;&#x3002;</p>
<p>&#x8FD9;&#x7BC7;&#x6587;&#x7AE0;&#x4F1A;&#x63D0;&#x5230;&#x975E;&#x5E38;&#x975E;&#x5E38;&#x591A;&#x7684;&#x5B66;&#x4E60;&#x8DEF;&#x7EBF;&#x548C;&#x94FE;&#x63A5;&#xFF0C;&#x5982;&#x679C;&#x4F60;&#x8FD8;&#x5728;&#x521D;&#x4E2D;&#x7EA7;&#x7684;&#x9636;&#x6BB5;&#xFF0C;&#x4E0D;&#x5FC5;&#x592A;&#x7126;&#x8651;&#xFF0C;&#x53EF;&#x4EE5;&#x628A;&#x8FD9;&#x7BC7;&#x6587;&#x7AE0;&#x4F5C;&#x4E3A;&#x4E00;&#x4E2A;&#x8FDB;&#x9636;&#x7684;<code>&#x8DEF;&#x7EBF;&#x56FE;</code>&#xFF0C;&#x5728;&#x672A;&#x6765;&#x7684;&#x65F6;&#x65E5;&#x91CC;&#x671D;&#x7740;&#x8FD9;&#x4E2A;&#x65B9;&#x5411;&#x52AA;&#x529B;&#x5C31;&#x597D;&#x3002;<br>&#x6211;&#x4E5F;&#x5E76;&#x4E0D;&#x662F;&#x8BF4;&#x8FD9;&#x7BC7;&#x6587;&#x7AE0;&#x662F;&#x8FDB;&#x9636;&#x9AD8;&#x7EA7;&#x5DE5;&#x7A0B;&#x5E08;&#x7684;&#x552F;&#x4E00;&#x4E00;&#x6761;&#x8DEF;&#x7EBF;&#xFF0C;&#x5982;&#x679C;&#x4F60;&#x5728;&#x4E1A;&#x52A1;&#x4E0A;&#x505A;&#x7684;&#x7CBE;&#x8FDB;&#xFF0C;&#x4EA6;&#x6216;&#x662F;&#x80FD;&#x5728;&#x6C9F;&#x901A;&#x4E0A;&#x516B;&#x9762;&#x73B2;&#x73D1;&#xFF0C;&#x914D;&#x5408;&#x5404;&#x65B9;&#x9762;&#x529B;&#x91CF;&#x628A;&#x9879;&#x76EE;&#x505A;&#x7684;&#x6F02;&#x6F02;&#x4EAE;&#x4EAE;&#xFF0C;&#x90A3;&#x4F60;&#x4E5F;&#x4E00;&#x6837;&#x53EF;&#x4EE5;&#x62E5;&#x6709;&#x8FD9;&#x4E2A;&#x5934;&#x8854;&#x3002;&#x672C;&#x6587;&#x53EA;&#x662F;&#x6211;&#x81EA;&#x5DF1;&#x7684;&#x4E00;&#x4E2A;&#x6210;&#x957F;&#x8DEF;&#x7EBF;&#x603B;&#x7ED3;&#x3002;</p>
<p>&#x672C;&#x7BC7;&#x6587;&#x7AE0;&#x9762;&#x5BF9;&#x7684;&#x4EBA;&#x7FA4;&#x662F;&#x5F00;&#x53D1;&#x7ECF;&#x9A8C;<code>1&#x5230;3&#x5E74;&#x7684;&#x521D;&#x4E2D;&#x7EA7;&#x524D;&#x7AEF;&#x5DE5;&#x7A0B;&#x5E08;</code>&#xFF0C;&#x5E0C;&#x671B;&#x80FD;&#x548C;&#x4F60;&#x4EEC;&#x4EA4;&#x4E2A;&#x5FC3;&#x3002;</p>
<p>&#x5DF2;&#x7ECF;&#x664B;&#x5347;&#x9AD8;&#x7EA7;&#x524D;&#x7AEF;&#x7684;&#x540C;&#x5B66;&#xFF0C;&#x6B22;&#x8FCE;&#x4F60;&#x5728;&#x8BC4;&#x8BBA;&#x533A;&#x7559;&#x4E0B;&#x4F60;&#x7684;&#x5FC3;&#x5F97;&#xFF0C;&#x8865;&#x5145;&#x6211;&#x7684;&#x4E00;&#x4E9B;&#x7F3A;&#x5931;&#x548C;&#x4E0D;&#x8DB3;&#x3002;</p>
<p><strong><a href="https://github.com/sl1673495" target="_blank">&#x6211;&#x7684; github &#x5730;&#x5740;</a></strong>&#xFF0C;&#x6B22;&#x8FCE; follow&#xFF0C;&#x6211;&#x4F1A;&#x6301;&#x7EED;&#x66F4;&#x65B0;&#x4E00;&#x4E9B;&#x503C;&#x5F97;&#x4F60;&#x5173;&#x6CE8;&#x7684;&#x9879;&#x76EE;&#x3002;</p>
<p><strong><a href="https://github.com/sl1673495/blogs" target="_blank">&#x6211;&#x7684; blog &#x5730;&#x5740;</a></strong>&#xFF0C;&#x8FD9;&#x91CC;&#x4F1A;&#x6301;&#x7EED;&#x66F4;&#x65B0;&#xFF0C;&#x70B9;&#x4E2A; star &#x4E0D;&#x5931;&#x8054;&#xFF01;&#x2728;</p>
<h3 id="&#x5E7F;&#x544A;&#x8B66;&#x544A;">&#x5E7F;&#x544A;&#x8B66;&#x544A;</h3>
<p>&#x5728;&#x672C;&#x6587;&#x4E2D;&#xFF0C;&#x6211;&#x4F1A;&#x5728;&#x4E00;&#x4E9B;&#x8DEF;&#x7EBF;&#x4E2D;&#x63A8;&#x8350;&#x4E00;&#x4E9B;&#x6211;&#x5B66;&#x4E60;&#x8FC7;&#x540E;&#x89C9;&#x5F97;&#x5F88;&#x68D2;&#x7684;&#x6398;&#x91D1;&#x5C0F;&#x518C;&#xFF0C;&#x4F1A;&#x7528;&#x5230;&#x6211;&#x81EA;&#x5DF1;&#x7684;&#x63A8;&#x8350;&#x7801;&#x3002;&#x5982;&#x679C;&#x4F60;&#x5F88;&#x4ECB;&#x610F;&#x8FD9;&#x4E2A;&#xFF0C;&#x90A3;&#x53EA;&#x80FD;&#x8BF4;&#x62B1;&#x6B49;&#x54B1;&#x4EEC;&#x4E0D;&#x592A;&#x6709;&#x7F18;&#x5206;&#xFF0C;&#x79BB;&#x5F00;&#x8FD9;&#x4E2A;&#x7F51;&#x9875;&#x5427;&#x3002;&#x6211;&#x4E0D;&#x89C9;&#x5F97;&#x8FD9;&#x6709;&#x4EC0;&#x4E48;&#x53EF;&#x803B;&#x7684;&#xFF0C;&#x6211;&#x53EA;&#x4F1A;&#x63A8;&#x786E;&#x5B9E;&#x5728;&#x6211;&#x5B66;&#x4E60;&#x8DEF;&#x5F84;&#x4E0A;&#x5E2E;&#x52A9;&#x5230;&#x6211;&#x7684;&#x5C0F;&#x518C;&#x3002;&#xFF08;&#x4F1A;&#x6D89;&#x53CA;&#x5230;&#x8BBE;&#x8BA1;&#x6A21;&#x5F0F;&#x3001;&#x6027;&#x80FD;&#x4F18;&#x5316;&#x4EE5;&#x53CA; TypeScript &#x5C0F;&#x518C;&#x63A8;&#x8350;&#xFF09;</p>
<h2 id="&#x57FA;&#x7840;&#x80FD;&#x529B;"><strong>&#x57FA;&#x7840;&#x80FD;&#x529B;</strong></h2>
<p>&#x6211;&#x6574;&#x7406;&#x4E86;&#x4E00;&#x7BC7;&#x4E2D;&#x7EA7;&#x524D;&#x7AEF;&#x7684;&#x5FC5;&#x5907;&#x6280;&#x672F;&#x6808;&#x80FD;&#x529B;&#xFF0C;<strong><a href="https://juejin.im/post/5e7af0685188255dcf4a497e" target="_blank">&#x5199;&#x7ED9;&#x5973;&#x670B;&#x53CB;&#x7684;&#x4E2D;&#x7EA7;&#x524D;&#x7AEF;&#x9762;&#x8BD5;&#x79D8;&#x7C4D;</a></strong> &#x3002;&#x8FD9;&#x7BC7;&#x6587;&#x7AE0;&#x91CC;&#x7684;&#x6280;&#x672F;&#x6808;&#x5F53;&#x7136;&#x90FD;&#x662F;&#x9700;&#x8981;&#x624E;&#x5B9E;&#x638C;&#x63E1;&#x7684;&#xFF0C;&#xFF08;&#x5176;&#x5B9E;&#x6211;&#x81EA;&#x5DF1;&#x4E5F;&#x6709;&#x4E00;&#x4E9B;&#x6F0F;&#x7F3A;&#xFF0C;&#x5077;&#x5077;&#x8865;&#x4E00;&#x4E0B;&#xFF09;&#x3002;</p>
<p>&#x5F53;&#x7136;&#x4E86;&#xFF0C;&#x4E0A;&#x8FDB;&#x5FC3;&#x5341;&#x8DB3;&#x7684;&#x4F60;&#x4E0D;&#x4F1A;&#x4E00;&#x76F4;&#x6EE1;&#x8DB3;&#x4E8E;&#x505A;&#x4E2D;&#x7EA7;&#x524D;&#x7AEF;&#xFF0C;&#x6211;&#x4EEC;&#x8981;&#x7EE7;&#x7EED;&#x5411;&#x4E0A;&#xFF0C;&#x5347;&#x804C;&#x52A0;&#x85AA;&#xFF0C;&#x8FCE;&#x5A36;&#x767D;&#x5BCC;&#x7F8E;&#xFF01;</p>
<h2 id="javascript"><strong>JavaScript</strong></h2>
<h3 id="&#x539F;&#x751F;-js-&#x7CFB;&#x5217;"><strong>&#x539F;&#x751F; js &#x7CFB;&#x5217;</strong></h3>
<p>&#x51B4;&#x7FBD;&#x5927;&#x4F6C;&#x7684;&#x8FD9;&#x7BC7;&#x535A;&#x5BA2;&#x91CC;&#xFF0C;&#x9664;&#x4E86; undescore &#x7684;&#x90E8;&#x5206;&#xFF0C;&#x4F60;&#x9700;&#x8981;&#x5168;&#x90E8;&#x90FD;&#x80FD;&#x638C;&#x63E1;&#x3002;&#x5E76;&#x4E14;&#x7075;&#x6D3B;&#x7684;&#x8FD0;&#x7528;&#x5230;&#x5F00;&#x53D1;&#x4E2D;&#x53BB;&#x3002;<br><strong><a href="https://github.com/mqyqingfeng/Blog" target="_blank">JavaScript &#x6DF1;&#x5165;&#x7CFB;&#x5217;&#x3001;JavaScript &#x4E13;&#x9898;&#x7CFB;&#x5217;&#x3001;ES6 &#x7CFB;&#x5217;</a></strong></p>
<h3 id="&#x5B8C;&#x5168;&#x719F;&#x7EC3;&#x638C;&#x63E1;-eventloop&#x3002;"><strong>&#x5B8C;&#x5168;&#x719F;&#x7EC3;&#x638C;&#x63E1; eventLoop&#x3002;</strong></h3>
<p><strong><a href="https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules" target="_blank">tasks-microtasks-queues-and-schedules</a></strong></p>
<h3 id="promise"><strong>Promise</strong></h3>
<ol>
<li><p>&#x4F60;&#x9700;&#x8981;&#x9605;&#x8BFB; Promise A + &#x89C4;&#x8303;&#xFF0C;&#x6CE8;&#x610F;&#x5176;&#x4E2D;&#x7684;&#x7EC6;&#x8282;&#xFF0C;&#x5E76;&#x4E14;&#x7075;&#x6D3B;&#x7684;&#x8FD0;&#x7528;&#x5230;&#x5F00;&#x53D1;&#x5F53;&#x4E2D;&#x53BB;&#x3002;<br><strong><a href="http://promisesaplus.com/" target="_blank">Promise A+ &#x82F1;&#x6587;&#x6587;&#x6863;</a></strong>  </p>
</li>
<li><p>&#x4F60;&#x9700;&#x8981;&#x8DDF;&#x7740;&#x7CBE;&#x54C1;&#x6559;&#x7A0B;&#x624B;&#x5199;&#x4E00;&#x904D; Promise&#xFF0C;&#x5BF9;&#x91CC;&#x9762;&#x7684;&#x7EC6;&#x8282;&#x6DF1;&#x5165;&#x601D;&#x8003;&#xFF0C;&#x5E76;&#x4E14;&#x628A;&#x5176;&#x4E2D;&#x5F02;&#x6B65;&#x7B49;&#x5F85;&#x3001;&#x9519;&#x8BEF;&#x5904;&#x7406;&#x7B49;&#x7B49;&#x7EC6;&#x8282;&#x878D;&#x4F1A;&#x8D2F;&#x901A;&#x5230;&#x4F60;&#x7684;&#x5F00;&#x53D1;&#x601D;&#x60F3;&#x91CC;&#x53BB;&#x3002;<br><strong><a href="https://github.com/xieranmaya/blog/issues/3" target="_blank">&#x5256;&#x6790; Promise &#x5185;&#x90E8;&#x7ED3;&#x6784;&#xFF0C;&#x4E00;&#x6B65;&#x4E00;&#x6B65;&#x5B9E;&#x73B0;&#x4E00;&#x4E2A;&#x5B8C;&#x6574;&#x7684;&#x3001;&#x80FD;&#x901A;&#x8FC7;&#x6240;&#x6709; Test case &#x7684; Promise &#x7C7B;</a></strong>  </p>
</li>
<li><p>&#x6700;&#x540E;&#xFF0C;&#x5BF9;&#x4E8E; promise &#x7684;&#x6838;&#x5FC3;&#xFF0C;&#x5F02;&#x6B65;&#x7684;&#x94FE;&#x5F0F;&#x8C03;&#x7528;&#xFF0C;&#x4F60;&#x5FC5;&#x987B;&#x80FD;&#x5199;&#x51FA;&#x6765;&#x7B80;&#x5316;&#x7248;&#x7684;&#x4EE3;&#x7801;&#x3002;<br><strong><a href="https://juejin.im/post/5e6f4579f265da576429a907" target="_blank">&#x6700;&#x7B80;&#x5B9E;&#x73B0; Promise&#xFF0C;&#x652F;&#x6301;&#x5F02;&#x6B65;&#x94FE;&#x5F0F;&#x8C03;&#x7528;&#xFF08;20 &#x884C;&#xFF09;</a></strong>  </p>
</li>
</ol>
<p>&#x9898;&#x5916;&#x8BDD;&#xFF0C;&#x5F53;&#x65F6;&#x7CBE;&#x70BC;&#x8FD9; 20 &#x884C;&#x771F;&#x7684;&#x7ED5;&#x4E86;&#x6211;&#x597D;&#x4E45; &#xFF0C;&#x4F46;&#x662F;&#x641E;&#x660E;&#x767D;&#x4E86;&#x4F1A;&#x6709;&#x79CD;&#x604D;&#x7136;&#x5927;&#x609F;&#x7684;&#x611F;&#x89C9;&#x3002;&#x8FD9;&#x79CD;&#x5F02;&#x6B65;&#x961F;&#x5217;&#x7684;&#x6280;&#x5DE7;&#x8981;&#x878D;&#x4F1A;&#x8D2F;&#x901A;&#x3002;</p>
<h3 id="async-await"><strong>async await</strong></h3>
<p>&#x5BF9;&#x4E8E; Promise &#x6211;&#x4EEC;&#x975E;&#x5E38;&#x719F;&#x6089;&#x4E86;&#xFF0C;&#x8FDB;&#x4E00;&#x6B65;&#x5EF6;&#x4F38;&#x5230; async await&#xFF0C;&#x8FD9;&#x662F;&#x76EE;&#x524D;&#x5F00;&#x53D1;&#x4E2D;&#x975E;&#x5E38;&#x975E;&#x5E38;&#x5E38;&#x7528;&#x7684;&#x5F02;&#x6B65;&#x5904;&#x7406;&#x65B9;&#x5F0F;&#xFF0C;&#x6211;&#x4EEC;&#x6700;&#x597D;&#x662F;&#x719F;&#x6089;&#x5B83;&#x7684; babel &#x7F16;&#x8BD1;&#x540E;&#x7684;&#x6E90;&#x7801;&#x3002;</p>
<p><strong><a href="https://juejin.im/post/5e79e841f265da5726612b6e" target="_blank">&#x624B;&#x5199; async await &#x7684;&#x6700;&#x7B80;&#x5B9E;&#x73B0;&#xFF08;20 &#x884C;&#x641E;&#x5B9A;&#xFF09;</a></strong><br>babel &#x5BF9;&#x4E8E; async await &#x914D;&#x5408; generator &#x51FD;&#x6570;&#xFF0C;&#x505A;&#x7684;&#x975E;&#x5E38;&#x5DE7;&#x5999;&#xFF0C;&#x8FD9;&#x91CC;&#x9762;&#x7684;&#x601D;&#x60F3;&#x6211;&#x4EEC;&#x4E5F;&#x8981;&#x53BB;&#x5B66;&#x4E60;&#xFF0C;&#x5982;&#x4F55;&#x9012;&#x5F52;&#x7684;&#x5904;&#x7406;&#x4E00;&#x4E2A;&#x4E32;&#x884C;&#x7684; promise &#x94FE;&#xFF1F;</p>
<p>&#x8FD9;&#x4E2A;&#x6280;&#x5DE7;&#x5728; <strong><a href="https://github.com/axios/axios/blob/e50a08b2c392c6ce3b5a9dc85ebc860d50414529/lib/core/Axios.js#L49-L62" target="_blank">axios &#x7684;&#x6E90;&#x7801;</a></strong>&#x91CC;&#x4E5F;&#x6709;&#x5E94;&#x7528;&#x3002;&#x5E73;&#x5E38;&#x7ECF;&#x5E38;&#x7528;&#x7684;&#x62E6;&#x622A;&#x5668;&#xFF0C;&#x672C;&#x8D28;&#x4E0A;&#x5C31;&#x662F;&#x4E00;&#x4E32; promise &#x7684;&#x4E32;&#x884C;&#x6267;&#x884C;&#x3002;</p>
<p>&#x5F53;&#x7136;&#xFF0C;&#x5982;&#x679C;&#x4F60;&#x8FD8;&#x6709;&#x4F59;&#x529B;&#x7684;&#x8BDD;&#xFF0C;&#x4E5F;&#x53EF;&#x4EE5;&#x7EE7;&#x7EED;&#x6DF1;&#x5165;&#x7684;&#x53BB;&#x770B; generator &#x51FD;&#x6570;&#x7684; babel &#x7F16;&#x8BD1;&#x6E90;&#x7801;&#x3002;&#x4E0D;&#x5F3A;&#x5236;&#x8981;&#x6C42;&#xFF0C;&#x6BD5;&#x7ADF; generator &#x51FD;&#x6570;&#x5728;&#x5F00;&#x53D1;&#x4E2D;&#x5DF2;&#x7ECF;&#x7528;&#x7684;&#x975E;&#x5E38;&#x5C11;&#x4E86;&#x3002;<br><strong><a href="https://github.com/mqyqingfeng/Blog/issues/102" target="_blank">ES6 &#x7CFB;&#x5217;&#x4E4B; Babel &#x5C06; Generator &#x7F16;&#x8BD1;&#x6210;&#x4E86;&#x4EC0;&#x4E48;&#x6837;&#x5B50;</a></strong></p>
<h3 id="&#x5F02;&#x5E38;&#x5904;&#x7406;"><strong>&#x5F02;&#x5E38;&#x5904;&#x7406;</strong></h3>
<p>&#x4F60;&#x5FC5;&#x987B;&#x7CBE;&#x901A;&#x5F02;&#x6B65;&#x573A;&#x666F;&#x4E0B;&#x7684;&#x9519;&#x8BEF;&#x5904;&#x7406;&#xFF0C;&#x8FD9;&#x662F;&#x9AD8;&#x7EA7;&#x5DE5;&#x7A0B;&#x5E08;&#x5FC5;&#x5907;&#x7684;&#x6280;&#x80FD;&#xFF0C;&#x5982;&#x679C;&#x5F00;&#x53D1;&#x4E2D;&#x7684;&#x5F02;&#x5E38;&#x88AB;&#x4F60;&#x5199;&#x7684;&#x5E93;&#x7ED9;&#x541E;&#x6389;&#x4E86;&#xFF0C;&#x90A3;&#x5C82;&#x4E0D;&#x662F;&#x53EF;&#x7B11;&#x3002;<br><strong><a href="https://juejin.im/post/589036f8570c3500621a3be2" target="_blank">Callback Promise Generator Async-Await &#x548C;&#x5F02;&#x5E38;&#x5904;&#x7406;&#x7684;&#x6F14;&#x8FDB;</a></strong></p>
<h3 id="&#x63D2;&#x4EF6;&#x673A;&#x5236;"><strong>&#x63D2;&#x4EF6;&#x673A;&#x5236;</strong></h3>
<p>&#x4F60;&#x9700;&#x8981;&#x5927;&#x6982;&#x7406;&#x89E3;&#x524D;&#x7AEF;&#x5404;&#x4E2A;&#x5E93;&#x4E2D;&#x7684;<code>&#x63D2;&#x4EF6;</code>&#x673A;&#x5236;&#x662F;&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x7684;&#xFF0C;&#x5728;&#x4F60;&#x81EA;&#x5DF1;&#x5F00;&#x53D1;&#x4E00;&#x4E9B;&#x5E93;&#x7684;&#x65F6;&#x5019;&#x4E5F;&#x80FD;&#x878D;&#x5165;&#x81EA;&#x5DF1;&#x9002;&#x5408;&#x7684;&#x63D2;&#x4EF6;&#x673A;&#x5236;&#x3002;<br><strong><a href="https://juejin.im/post/5e13ea6a6fb9a0482b297e8e" target="_blank">Koa &#x7684;&#x6D0B;&#x8471;&#x4E2D;&#x95F4;&#x4EF6;&#xFF0C;Redux &#x7684;&#x4E2D;&#x95F4;&#x4EF6;&#xFF0C;Axios &#x7684;&#x62E6;&#x622A;&#x5668;&#x8BA9;&#x4F60;&#x8FF7;&#x60D1;&#x5417;&#xFF1F;&#x5B9E;&#x73B0;&#x4E00;&#x4E2A;&#x7CBE;&#x7B80;&#x7248;&#x7684;&#x5C31;&#x5F7B;&#x5E95;&#x641E;&#x61C2;&#x4E86;&#x3002;</a></strong></p>
<h3 id="&#x8BBE;&#x8BA1;&#x6A21;&#x5F0F;"><strong>&#x8BBE;&#x8BA1;&#x6A21;&#x5F0F;</strong></h3>
<p>&#x5BF9;&#x4E8E;&#x4E00;&#x4E9B;&#x590D;&#x6742;&#x573A;&#x666F;&#xFF0C;&#x4F60;&#x7684;&#x5F00;&#x53D1;&#x4E0D;&#x80FD;&#x518D;&#x662F;<code>if else</code>&#x5D4C;&#x5957;&#x4E00;&#x628A;&#x68AD;&#x4E86;&#xFF0C;&#x4F60;&#x9700;&#x8981;&#x628A;&#x8BBE;&#x8BA1;&#x6A21;&#x5F0F;&#x597D;&#x597D;&#x770B;&#x4E00;&#x904D;&#xFF0C;&#x5728;&#x5408;&#x9002;&#x7684;&#x573A;&#x666F;&#x4E0B;&#x9009;&#x62E9;&#x5408;&#x9002;&#x7684;&#x8BBE;&#x8BA1;&#x6A21;&#x5F0F;&#x3002;&#x8FD9;&#x91CC;&#x5C31;&#x63A8;&#x8350;&#x6398;&#x91D1;&#x5C0F;&#x518C;&#x5427;&#xFF0C;&#x76F8;&#x4FE1;&#x8FD9;&#x7BC7;&#x5C0F;&#x518C;&#x4F1A;&#x8BA9;&#x4F60;&#x7684;<code>&#x5DE5;&#x7A0B;&#x80FD;&#x529B;</code>&#x5F97;&#x5230;&#x8D28;&#x7684;&#x98DE;&#x8DC3;&#xFF0C;&#x4E3E;&#x4F8B;&#x6765;&#x8BF4;&#xFF0C;&#x5728; Vue &#x7684;&#x6E90;&#x7801;&#x4E2D;&#x5C31;&#x7528;&#x5230;&#x4E86;<code>&#x89C2;&#x5BDF;&#x8005;&#x6A21;&#x5F0F;</code>&#x3001;<code>&#x53D1;&#x5E03;&#x8BA2;&#x9605;&#x6A21;&#x5F0F;</code>&#x3001;<code>&#x7B56;&#x7565;&#x6A21;&#x5F0F;</code>&#x3001;<code>&#x9002;&#x914D;&#x5668;&#x6A21;&#x5F0F;</code>&#x3001;<code>&#x53D1;&#x5E03;&#x8BA2;&#x9605;&#x6A21;&#x5F0F;</code>&#x3001;<code>&#x5DE5;&#x5382;&#x6A21;&#x5F0F;</code>&#x3001;<code>&#x7EC4;&#x5408;&#x6A21;&#x5F0F;</code>&#x3001;<code>&#x4EE3;&#x7406;&#x6A21;&#x5F0F;</code>&#x3001;<code>&#x95E8;&#x9762;&#x6A21;&#x5F0F;</code>&#x7B49;&#x7B49;&#x3002;</p>
<p>&#x800C;&#x8FD9;&#x4E9B;&#x8BBE;&#x8BA1;&#x6A21;&#x5F0F;&#x5982;&#x679C;&#x4F60;&#x6CA1;&#x5B66;&#x4E60;&#x8FC7;&#x53EF;&#x80FD;&#x5F88;&#x96BE;&#x60F3;&#x5230;&#x5982;&#x4F55;&#x5E94;&#x7528;&#x5728;&#x5DE5;&#x7A0B;&#x4E4B;&#x4E2D;&#xFF0C;&#x4F46;&#x662F;&#x5982;&#x679C;&#x4F60;&#x5B66;&#x4E60;&#x8FC7;&#xFF0C;&#x5B83;&#x5C31;&#x53D8;&#x6210;&#x4E86;&#x4F60;&#x5185;&#x5728;&#x7684;<code>&#x5DE5;&#x7A0B;&#x80FD;&#x529B;</code>&#xFF0C;&#x5F80;&#x5927;&#x4E86;&#x8BF4;&#xFF0C;&#x4E5F;&#x53EF;&#x4EE5;&#x662F;<code>&#x67B6;&#x6784;&#x80FD;&#x529B;</code>&#x7684;&#x4E00;&#x90E8;&#x5206;&#x3002;</p>
<blockquote>
<p>&#xF8FF; &#x5728;&#x300A;&#x8BBE;&#x8BA1;&#x6A21;&#x5F0F;&#x300B;&#x8FD9;&#x672C;&#x5C0F;&#x518C;&#x4E2D;&#x6211;&#x4EEC;&#x63D0;&#x5230;&#x8FC7;&#xFF0C;&#x5373;&#x4F7F;&#x662F;&#x5728;&#x77AC;&#x606F;&#x4E07;&#x53D8;&#x7684;&#x524D;&#x7AEF;&#x9886;&#x57DF;&#xFF0C;&#x4E5F;&#x5B58;&#x5728;&#x4E00;&#x4E9B;&#x5177;&#x5907; &#x201C;&#x4E00;&#x6B21;&#x5B66;&#x4E60;&#xFF0C;&#x7EC8;&#x751F;&#x53D7;&#x7528;&#x201D; &#x7279;&#x6027;&#x7684;&#x77E5;&#x8BC6;&#x3002;&#x4ECE;&#x5DE5;&#x7A0B;&#x7684;&#x89D2;&#x5EA6;&#x770B;&#xFF0C;&#x6211;&#x63A8;&#x8350;&#x5927;&#x5BB6;&#x7740;&#x91CD;&#x5B66;&#x4E60;&#x7684;&#x662F;&#x8BBE;&#x8BA1;&#x6A21;&#x5F0F;&#x3002; - &#x4FEE;&#x8A00;<br>&#x201D;</p>
</blockquote>
<p>![][img-0]</p>
<h3 id="&#x57FA;&#x7840;&#x7B97;&#x6CD5;"><strong>&#x57FA;&#x7840;&#x7B97;&#x6CD5;</strong></h3>
<p>&#x638C;&#x63E1;&#x4E00;&#x4E9B;&#x57FA;&#x7840;&#x7B97;&#x6CD5;&#x6838;&#x5FC3;&#x601D;&#x60F3;&#x6216;&#x7B80;&#x5355;&#x7B97;&#x6CD5;&#x95EE;&#x9898;&#xFF0C;&#x6BD4;&#x5982;&#x6392;&#x5E8F;&#x3002;</p>
<h3 id="&#x5F00;&#x53D1;&#x601D;&#x60F3;"><strong>&#x5F00;&#x53D1;&#x601D;&#x60F3;</strong></h3>
<p>&#x4F60;&#x9700;&#x8981;&#x77E5;&#x9053;&#x7EC4;&#x5408;&#x4F18;&#x4E8E;&#x7EE7;&#x627F;&#x7684;&#x601D;&#x60F3;&#xFF0C;&#x4E0D;&#x8981;&#x518D;&#x6EE1;&#x53E3;&#x90FD;&#x662F; oop&#xFF0C;&#x5199;&#x4EC0;&#x4E48;&#x90FD;&#x6765;&#x4E2A; class extends &#x4E86;&#xFF0C;&#x5728;&#x524D;&#x7AEF; ui &#x6241;&#x5E73;&#x5316;&#x7684;&#x524D;&#x63D0;&#x4E0B;&#xFF0C;&#x771F;&#x7684;&#x6CA1;&#x90A3;&#x4E48;&#x591A;&#x9700;&#x8981;&#x7EE7;&#x627F;&#x7684;&#x573A;&#x666F;&#x3002;<br><a href="https://medium.com/javascript-scene/master-the-javascript-interview-what-s-the-difference-between-class-prototypal-inheritance-e4cd0a7562e9" target="_blank">https://medium.com/javascript-scene/master-the-javascript-interview-what-s-the-difference-between-class-prototypal-inheritance-e4cd0a7562e9</a></p>
<blockquote>
<p>&#xF8FF; &#x201C;&#x2026;the problem with object-oriented languages is they&#x2019;ve got all this implicit environment that they carry around with them. You wanted a banana but what you got was a gorilla holding the banana and the entire jungle.&#x201D; ~ Joe Armstrong &#x2014; &#x201C;Coders at Work&#x201D;<br>&#x201D;<br>&#xF8FF; &#x9762;&#x5411;&#x5BF9;&#x8C61;&#x8BED;&#x8A00;&#x7684;&#x95EE;&#x9898;&#x5728;&#x4E8E;&#x5B83;&#x4EEC;&#x5E26;&#x6765;&#x4E86;&#x6240;&#x6709;&#x8FD9;&#x4E9B;&#x9690;&#x542B;&#x7684;&#x73AF;&#x5883;&#x3002; &#x4F60;&#x60F3;&#x8981;&#x4E00;&#x4E2A;&#x9999;&#x8549;&#xFF0C;&#x4F46;&#x4F60;&#x5F97;&#x5230;&#x7684;&#x662F;&#x62FF;&#x7740;&#x9999;&#x8549;&#x548C;&#x6574;&#x4E2A;&#x4E1B;&#x6797;&#x7684;&#x5927;&#x7329;&#x7329;&#x3002;<br>&#x201D;</p>
</blockquote>
<h3 id="&#x4EE3;&#x7801;&#x89C4;&#x8303;"><strong>&#x4EE3;&#x7801;&#x89C4;&#x8303;</strong></h3>
<p>&#x4F60;&#x9700;&#x8981;&#x719F;&#x8BFB; clean-code-javascript&#xFF0C;&#x5E76;&#x4E14;&#x6DF1;&#x5165;&#x7ED3;&#x5408;&#x5230;&#x65E5;&#x5E38;&#x5F00;&#x53D1;&#x4E2D;&#xFF0C;&#x7ED3;&#x5408;&#x4F60;&#x4EEC;&#x5C0F;&#x7EC4;&#x7684;&#x573A;&#x666F;&#x5236;&#x5B9A;&#x81EA;&#x5DF1;&#x7684;&#x89C4;&#x8303;&#x3002;<br><strong><a href="https://github.com/beginor/clean-code-javascript" target="_blank">clean-code-javascript</a></strong></p>
<h2 id="&#x6846;&#x67B6;&#x7BC7;"><strong>&#x6846;&#x67B6;&#x7BC7;</strong></h2>
<p>&#x5BF9;&#x4E8E;&#x9AD8;&#x7EA7;&#x5DE5;&#x7A0B;&#x5E08;&#x6765;&#x8BF4;&#xFF0C;&#x4F60;&#x5FC5;&#x987B;&#x8981;&#x6709;&#x4E00;&#x4E2A;&#x4F60;&#x8D81;&#x624B;&#x7684;&#x6846;&#x67B6;&#xFF0C;&#x5B83;&#x5C31;&#x50CF;&#x4F60;&#x624B;&#x4E2D;&#x7684;&#x4E00;&#x628A;&#x5229;&#x5251;&#xFF0C;&#x80FD;&#x591F;&#x8BA9;&#x4F60;&#x62AB;&#x8346;&#x65A9;&#x68D8;&#xFF0C;&#x65A9;&#x6740;&#x5404;&#x79CD;&#x9879;&#x76EE;&#x4E8E;&#x9A6C;&#x4E0B;&#x3002;</p>
<p>&#x4E0B;&#x9762;&#x6211;&#x4F1A;&#x5206;&#x4E3A;<code>Vue</code>&#x548C;<code>React</code>&#x4E24;&#x4E2A;&#x65B9;&#x9762;&#x6DF1;&#x5165;&#x53BB;&#x8BB2;&#x3002;</p>
<h3 id="vue"><strong>Vue</strong></h3>
<p>Vue &#x65B9;&#x9762;&#x7684;&#x8BDD;&#xFF0C;&#x6211;&#x4E3B;&#x8981;&#x662F;&#x5E08;&#x4ECE;&#x9EC4;&#x8F76;&#x8001;&#x5E08;&#xFF0C;&#x8DDF;&#x7740;&#x4ED6;&#x8BA4;&#x771F;&#x8D70;&#xFF0C;&#x57FA;&#x672C;&#x4E0A;&#x5728; Vue &#x8FD9;&#x65B9;&#x9762;&#x4F60;&#x53EF;&#x4EE5;&#x505A;&#x5230;&#x57FA;&#x672C;&#x65E0;&#x654C;&#x3002;</p>
<h3 id="&#x719F;&#x7EC3;&#x8FD0;&#x7528;"><strong>&#x719F;&#x7EC3;&#x8FD0;&#x7528;</strong></h3>
<ol>
<li><p>&#x5BF9;&#x4E8E; Vue &#x4F60;&#x5FC5;&#x987B;&#x975E;&#x5E38;&#x719F;&#x7EC3;&#x7684;&#x8FD0;&#x7528;&#xFF0C;&#x5B98;&#x7F51;&#x7684; api &#x4F60;&#x57FA;&#x672C;&#x4E0A;&#x8981;&#x5168;&#x90E8;&#x8FC7;&#x4E00;&#x904D;&#x3002;&#x5E76;&#x4E14;&#x4F60;&#x8981;&#x5229;&#x7528;&#x4E00;&#x4E9B;&#x9AD8;&#x7EA7;&#x7684; api &#x53BB;&#x5B9E;&#x73B0;&#x5DE7;&#x5999;&#x7684;&#x5C01;&#x88C5;&#x3002;&#x4E3E;&#x51E0;&#x4E2A;&#x7B80;&#x5355;&#x7684;&#x4F8B;&#x5B50;&#x3002;  </p>
</li>
<li><p>&#x4F60;&#x8981;&#x77E5;&#x9053;&#x600E;&#x4E48;&#x7528;<code>slot-scope</code>&#x53BB;&#x505A;&#x4E00;&#x4E9B;&#x6570;&#x636E;&#x548C; ui &#x5206;&#x79BB;&#x7684;&#x5C01;&#x88C5;&#x3002; &#x4EE5; <strong><a href="https://github.com/posva/vue-promised" target="_blank">vue-promised</a></strong> &#x8FD9;&#x4E2A;&#x5E93;&#x4E3A;&#x4F8B;&#x3002; Promised &#x7EC4;&#x4EF6;&#x5E76;&#x4E0D;&#x5173;&#x6CE8;&#x4F60;&#x7684;&#x89C6;&#x56FE;&#x5C55;&#x793A;&#x6210;&#x4EC0;&#x4E48;&#x6837;&#xFF0C;&#x5B83;&#x53EA;&#x662F;&#x5E2E;&#x4F60;&#x7BA1;&#x7406;&#x5F02;&#x6B65;&#x6D41;&#x7A0B;&#xFF0C;&#x5E76;&#x4E14;&#x901A;&#x8FC7;&#x4F60;&#x4F20;&#x5165;&#x7684;<code>slot-scope</code>&#xFF0C;&#x5728;&#x5408;&#x9002;&#x7684;&#x65F6;&#x673A;&#x628A;&#x6570;&#x636E;&#x56DE;&#x629B;&#x7ED9;&#x4F60;&#xFF0C;&#x5E76;&#x4E14;&#x5E2E;&#x4F60;&#x53BB;&#x5C55;&#x793A;&#x4F60;&#x4F20;&#x5165;&#x7684;&#x89C6;&#x56FE;&#x3002;  </p>
</li>
</ol>
<pre class="language-"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Promised</span> <span class="token attr-name">:promise</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>usersPromise<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- Use the &quot;pending&quot; slot to display a loading message --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name"><span class="token namespace">v-slot:</span>pending</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Loading...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- The default scoped slot will be used as the result --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">v-slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>data<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>user in data<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ user.name }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- The &quot;rejected&quot; scoped slot will be used if there is an error --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name"><span class="token namespace">v-slot:</span>rejected</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>error<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Error: {{ error.message }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Promised</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre><ol>
<li>&#x4F60;&#x9700;&#x8981;&#x719F;&#x7EC3;&#x7684;&#x4F7F;&#x7528;<code>Vue.extends</code>&#xFF0C;&#x914D;&#x5408;&#x9879;&#x76EE;&#x505A;&#x4E00;&#x4E9B;<code>&#x547D;&#x4EE4;&#x5F0F;api</code>&#x7684;&#x5C01;&#x88C5;&#x3002;&#x5E76;&#x4E14;&#x77E5;&#x9053;&#x5B83;&#x4E3A;&#x4EC0;&#x4E48;&#x53EF;&#x4EE5;&#x8FD9;&#x6837;&#x7528;&#x3002;&#xFF08;&#x9700;&#x8981;&#x5177;&#x5907;&#x6E90;&#x7801;&#x77E5;&#x8BC6;&#xFF09; <strong><a href="https://github.com/sl1673495/vue-netease-music/blob/master/src/base/confirm.vue" target="_blank">confirm &#x7EC4;&#x4EF6;</a></strong></li>
</ol>
<pre class="language-"><code>export const confirm = function(text, title, onConfirm = () =&gt; {}) {
  if (typeof title === &quot;function&quot;) {
    onConfirm = title
    title = undefined
  }
  const ConfirmCtor = Vue.extend(Confirm)
  const getInstance = () =&gt; {
    if (!instanceCache) {
      instanceCache = new ConfirmCtor({
        propsData: {
          text,
          title,
          onConfirm
        }
      })
      // &#x751F;&#x6210;dom
      instanceCache.$mount()
      document.body.appendChild(instanceCache.$el)
    } else {
      // &#x66F4;&#x65B0;&#x5C5E;&#x6027;
      instanceCache.text = text
      instanceCache.title = title
      instanceCache.onConfirm = onConfirm
    }
    return instanceCache
  }
  const instance = getInstance()
  // &#x786E;&#x4FDD;&#x66F4;&#x65B0;&#x7684;prop&#x6E32;&#x67D3;&#x5230;dom
  // &#x786E;&#x4FDD;&#x52A8;&#x753B;&#x6548;&#x679C;
  Vue.nextTick(() =&gt; {
    instance.visible = true
  })
}
</code></pre><ol>
<li>&#x4F60;&#x8981;&#x5F00;&#x59CB;&#x4F7F;&#x7528;<code>JSX</code>&#x6765;&#x7F16;&#x5199;&#x4F60;&#x9879;&#x76EE;&#x4E2D;&#x7684;&#x590D;&#x6742;&#x7EC4;&#x4EF6;&#x4E86;&#xFF0C;&#x6BD4;&#x5982;&#x5728;&#x6211;&#x7684;&#x7F51;&#x6613;&#x4E91;&#x97F3;&#x4E50;&#x9879;&#x76EE;&#x4E2D;&#xFF0C;&#x6211;&#x9047;&#x5230;&#x4E86;&#x4E00;&#x4E2A;<strong><a href="https://juejin.im/post/5d40fa605188255d2e32c929" target="_blank">&#x590D;&#x6742;&#x7684;&#x97F3;&#x4E50;&#x8868;&#x683C;&#x9700;&#x6C42;</a></strong>&#xFF0C;&#x652F;&#x6301;&#x641C;&#x7D22;&#x6587;&#x5B57;&#x9AD8;&#x4EAE;&#x3001;&#x52A8;&#x6001;&#x9690;&#x85CF;&#x5217;&#x7B49;&#x7B49;&#x3002;<br>&#x5F53;&#x7136;&#x5BF9;&#x4E8E;&#x73B0;&#x5728;&#x7248;&#x672C;&#x7684; Vue&#xFF0C;JSX &#x8FD8;&#x662F;&#x4E0D;&#x592A;&#x597D;&#x7528;&#xFF0C;&#x6709;&#x5F88;&#x591A;&#x5C5E;&#x6027;&#x9700;&#x8981;&#x5199;&#x5D4C;&#x5957;&#x5BF9;&#x8C61;&#xFF0C;&#x8FD9;&#x4F1A;&#x9020;&#x6210;&#x5F88;&#x591A;&#x4E0D;&#x5FC5;&#x8981;&#x7684;&#x9EBB;&#x70E6;&#xFF0C;&#x6BD4;&#x5982;&#x6CA1;&#x529E;&#x6CD5;&#x50CF; React &#x4E00;&#x6837;&#x76F4;&#x63A5;&#x628A;&#x5916;&#x5C42;&#x7EC4;&#x4EF6;&#x4F20;&#x5165;&#x7684; props &#x900F;&#x4F20;&#x4E0B;&#x53BB;&#xFF0C;Vue3 &#x7684; rfc &#x4E2D;&#x63D0;&#x5230;&#x4F1A;&#x628A; vnode &#x8282;&#x70B9;&#x7684;&#x5C5E;&#x6027;&#x8FDB;&#x4E00;&#x6B65;&#x6241;&#x5E73;&#x5316;&#xFF0C;&#x6211;&#x4EEC;&#x671F;&#x5F85;&#x5F97;&#x5230;&#x63A5;&#x8FD1;&#x4E8E; React &#x7684;&#x5B8C;&#x7F8E; JSX &#x5F00;&#x53D1;&#x4F53;&#x9A8C;&#x5427;&#x3002;</li>
</ol>
<pre class="language-"><code>const tableAttrs = {
      attrs,
      on: {
        ...this.$listeners,
        [&quot;row-click&quot;]: this.onRowClick,
      },
      props: {
        ...props,
        headerCellClassName: &quot;title-th&quot;,
        cellClassName: this.tableCellClassName,
        data: this.songs,
      },
    }
</code></pre><ol>
<li><p>&#x4F60;&#x8981;&#x6DF1;&#x5165;&#x4E86;&#x89E3; Vue &#x4E2D; nextTick &#x7684;&#x539F;&#x7406;&#xFF0C;&#x5E76;&#x4E14;&#x77E5;&#x9053;&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x7528;&#x5FAE;&#x4EFB;&#x52A1;&#x961F;&#x5217;&#x4F18;&#x4E8E;&#x5B8F;&#x4EFB;&#x52A1;&#x961F;&#x5217;&#xFF0C;&#x7ED3;&#x5408;&#x4F60;&#x7684; eventloop &#x77E5;&#x8BC6;&#x6DF1;&#x5EA6;&#x601D;&#x8003;&#x3002;&#x6700;&#x540E;&#x878D;&#x5165;&#x5230;&#x4F60;&#x7684;<code>&#x5F02;&#x6B65;&#x5408;&#x5E76;&#x4F18;&#x5316;</code>&#x7684;&#x77E5;&#x8BC6;&#x4F53;&#x7CFB;&#x4E2D;&#x53BB;&#x3002;<br><strong><a href="https://segmentfault.com/a/1190000008589736" target="_blank">Vue &#x6E90;&#x7801;&#x8BE6;&#x89E3;&#x4E4B; nextTick&#xFF1A;MutationObserver &#x53EA;&#x662F;&#x6D6E;&#x4E91;&#xFF0C;microtask &#x624D;&#x662F;&#x6838;&#x5FC3;&#xFF01;</a></strong>  </p>
</li>
<li><p>&#x4F60;&#x8981;&#x80FD;&#x7406;&#x89E3; Vue &#x4E2D;&#x7684;&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x3002;&#x5173;&#x4E8E;&#x8FD9;&#x7BC7;&#x6587;&#x7AE0;&#x4E2D;&#x4E3A;&#x4EC0;&#x4E48; slot-scope &#x4E0D;&#x751F;&#x6548;&#x7684;&#x95EE;&#x9898;&#xFF0C;&#x4F60;&#x4E0D;&#x80FD;&#x770B;&#x4ED6;&#x7684;&#x6587;&#x7AE0;&#x8BB2;&#x89E3;&#x90FD;&#x4E00;&#x5934;&#x96FE;&#x6C34;&#x3002;&#xFF08;&#x9700;&#x8981;&#x4F60;&#x5177;&#x5907;&#x6E90;&#x7801;&#x77E5;&#x8BC6;&#xFF09;<br><strong><a href="https://segmentfault.com/p/1210000012743259/read" target="_blank">&#x63A2;&#x7D22; Vue &#x9AD8;&#x9636;&#x7EC4;&#x4EF6; | HcySunYang</a></strong>  </p>
</li>
<li><p>&#x5BF9;&#x4E8E; Vuex &#x548C; vue-router &#x7684;&#x4F7F;&#x7528;&#x5FC5;&#x987B;&#x975E;&#x5E38;&#x719F;&#x7EC3;&#xFF0C;&#x77E5;&#x9053;&#x4EC0;&#x4E48;&#x65F6;&#x5019;&#x8BE5;&#x7528; Vuex&#xFF0C;&#x4EC0;&#x4E48;&#x9700;&#x6C42;&#x9700;&#x8981;&#x5229;&#x7528;&#x4EC0;&#x4E48;&#x6837;&#x7684; router &#x94A9;&#x5B50;&#xFF0C;&#x8FD9;&#x6837;&#x624D;&#x80FD; hold &#x4F4F;&#x4E00;&#x4E2A;&#x5927;&#x578B;&#x7684;&#x9879;&#x76EE;&#xFF0C;&#x8FD9;&#x4E2A;&#x6211;&#x89C9;&#x5F97;&#x8FD8;&#x662F;&#x5C3D;&#x91CF;&#x53BB;&#x5B66;&#x6E90;&#x7801;&#x5427;&#x3002;  </p>
</li>
</ol>
<h3 id="&#x6E90;&#x7801;&#x6DF1;&#x5165;"><strong>&#x6E90;&#x7801;&#x6DF1;&#x5165;</strong></h3>
<ol>
<li>&#x4F60;&#x4E0D;&#x5149;&#x8981;&#x719F;&#x7EC3;&#x8FD0;&#x7528; Vue&#xFF0C;&#x7531;&#x4E8E; Vue &#x7684;&#x6E90;&#x7801;&#x5199;&#x7684;&#x975E;&#x5E38;&#x7CBE;&#x7F8E;&#xFF0C;&#x800C;&#x4E14;&#x9605;&#x8BFB;&#x96BE;&#x5EA6;&#x4E0D;&#x662F;&#x975E;&#x5E38;&#x5927;&#xFF0C;&#x5F88;&#x591A;&#x4EBA;&#x4E5F;&#x9009;&#x62E9;&#x53BB;&#x9605;&#x8BFB; Vue &#x7684;&#x6E90;&#x7801;&#x3002;&#x5148;&#x63A8;&#x8350;&#x4E00;&#x4E2A;&#x963F;&#x91CC;&#x5DF4;&#x5DF4;&#x7684;&#x67D2;&#x964C;&#x540C;&#x5B66;&#x6398;&#x91D1;&#x7684;&#x5C0F;&#x518C;&#xFF0C;9.9 &#x5143;&#x4E70;&#x4E0D;&#x4E86;&#x5403;&#x4E8F;&#xFF0C;&#x6BCF;&#x7AE0;&#x8282;&#x8FD8;&#x9644;&#x5E26;<code>demo</code>&#xFF0C;&#x975E;&#x5E38;&#x9002;&#x5408;&#x5165;&#x95E8;&#x6E90;&#x7801;&#xFF1A;</li>
</ol>
<p>![][img-1]</p>
<ol>
<li><p>&#x89C6;&#x9891;&#x8BFE;&#x8FD9;&#x91CC;&#x63A8;&#x8350;&#x9EC4;&#x8F76;&#x8001;&#x5E08;&#x7684; Vue &#x6E90;&#x7801;&#x8BFE;&#x7A0B;&#x3002;&#x8FD9;&#x91CC;&#x4E5F;&#x5305;&#x62EC;&#x4E86; Vuex &#x548C; vue-router &#x7684;&#x6E90;&#x7801;&#x3002;<br><strong><a href="https://coding.imooc.com/class/228.html" target="_blank">Vue.js &#x6E90;&#x7801;&#x5168;&#x65B9;&#x4F4D;&#x6DF1;&#x5165;&#x89E3;&#x6790; &#xFF08;&#x542B; Vue3.0 &#x6E90;&#x7801;&#x5206;&#x6790;&#xFF09;</a></strong>  </p>
</li>
<li><p>&#x63A8;&#x8350; HcySunYang &#x5927;&#x4F6C;&#x7684; Vue &#x9010;&#x884C;&#x5206;&#x6790;&#xFF0C;&#x9700;&#x8981;&#x4E0B;&#x8F7D; git &#x4ED3;&#x5E93;&#xFF0C;&#x5207;&#x5230; elegant &#x5206;&#x652F;&#x81EA;&#x5DF1;&#x672C;&#x5730;&#x542F;&#x52A8;&#x3002;<br><strong><a href="https://github.com/HcySunYang/vue-design" target="_blank">Vue &#x9010;&#x884C;&#x7EA7;&#x522B;&#x7684;&#x6E90;&#x7801;&#x5206;&#x6790;</a></strong>  </p>
</li>
<li><p>&#x5F53;&#x7136;&#xFF0C;&#x8FD9;&#x4E2A;&#x4ED3;&#x5E93;&#x7684; master &#x5206;&#x652F;&#x4E5F;&#x662F;&#x5B9D;&#x85CF;&#xFF0C;&#x662F;&#x8FD9;&#x4E2A;&#x4F5C;&#x8005;&#x7684;&#x6E32;&#x67D3;&#x5668;&#x7CFB;&#x5217;&#x6587;&#x7AE0;&#xFF0C;&#x8131;&#x79BB;&#x6846;&#x67B6;&#x8BB2;&#x89E3;&#x4E86; vnode &#x548C; diff &#x7B97;&#x6CD5;&#x7684;&#x672C;&#x8D28;<br><strong><a href="http://hcysun.me/vue-design/zh/essence-of-comp.html#%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BA%A7%E5%87%BA%E6%98%AF%E4%BB%80%E4%B9%88" target="_blank">&#x7EC4;&#x4EF6;&#x7684;&#x672C;&#x8D28;</a></strong>  </p>
</li>
</ol>
<h3 id="vue3-&#x5C55;&#x671B;"><strong>Vue3 &#x5C55;&#x671B;</strong></h3>
<ol>
<li>Vue3 &#x5DF2;&#x7ECF;&#x53D1;&#x5E03;&#x4E86; Alpha &#x7248;&#x672C;&#xFF0C;&#x4F60;&#x53EF;&#x4EE5;&#x63D0;&#x524D;&#x5B66;&#x4E60;<code>Hook</code>&#x76F8;&#x5173;&#x7684;&#x5F00;&#x53D1;&#x6A21;&#x5F0F;&#x4E86;&#xFF0C;&#x9762;&#x5411;&#x672A;&#x6765;&#x7684;&#x5F02;&#x6B65;&#x8BF7;&#x6C42;&#x7BA1;&#x7406;&#x662F; <strong><a href="https://github.com/zeit/swr" target="_blank">zeit/swr</a></strong> &#x8FD9;&#x79CD;&#x81EA;&#x5B9A;&#x4E49; Hook &#x5E93;&#x6240;&#x5E26;&#x6765;&#x7684;&#x3002; &#x5728;&#x8BB2;&#x89E3;&#x4E4B;&#x524D;&#xFF0C;&#x5148;&#x4E3E;&#x4E2A;&#x4F8B;&#x5B50;&#xFF0C;&#x5728; Vue2 &#x4E2D;&#x5982;&#x679C;&#x6211;&#x9700;&#x8981;&#x8BF7;&#x6C42;&#x4E00;&#x4EFD;&#x6570;&#x636E;&#xFF0C;&#x5E76;&#x4E14;&#x5728;<code>loading</code>&#x548C;<code>error</code>&#x65F6;&#x90FD;&#x5C55;&#x793A;&#x5BF9;&#x5E94;&#x7684;&#x89C6;&#x56FE;&#xFF0C;&#x4E00;&#x822C;&#x6765;&#x8BF4;&#xFF0C;&#x6211;&#x4EEC;&#x4F1A;&#x8FD9;&#x6837;&#x5199;&#xFF1A;</li>
</ol>
<pre class="language-"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>error<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>failed to load<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-else-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>loading<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>loading...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-else</span><span class="token punctuation">&gt;</span></span>hello {{fullName}}!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span>
import { createComponent, computed } from &apos;vue&apos;
import useSWR from &apos;vue-swr&apos;

export default {
  data() {
    // &#x96C6;&#x4E2D;&#x5F0F;&#x7684;data&#x5B9A;&#x4E49; &#x5982;&#x679C;&#x6709;&#x5176;&#x4ED6;&#x903B;&#x8F91;&#x76F8;&#x5173;&#x7684;&#x6570;&#x636E;&#x5C31;&#x5F88;&#x5BB9;&#x6613;&#x6DF7;&#x4E71;
    return {
        data: {
            firstName: &apos;&apos;,
            lastName: &apos;&apos;
        },
        loading: false,
        error: false,
    },
  },
  async created() {
      try {
        // &#x7BA1;&#x7406;loading
        this.loading = true
        // &#x53D6;&#x6570;&#x636E;
        const data = await this.$axios(&apos;/api/user&apos;)  
        this.data = data
      } catch (e) {
        // &#x7BA1;&#x7406;error
        this.error = true  
      } finally {
        // &#x7BA1;&#x7406;loading
        this.loading = false
      }
  },
  computed() {
      // &#x6CA1;&#x4EBA;&#x77E5;&#x9053;&#x8FD9;&#x4E2A;fullName&#x548C;&#x54EA;&#x4E00;&#x90E8;&#x5206;&#x7684;&#x5F02;&#x6B65;&#x8BF7;&#x6C42;&#x6709;&#x5173; &#x548C;&#x54EA;&#x4E00;&#x90E8;&#x5206;&#x7684;data&#x6709;&#x5173; &#x9664;&#x975E;&#x4ED4;&#x7EC6;&#x9605;&#x8BFB;
      // &#x5728;&#x7EC4;&#x4EF6;&#x5927;&#x4E86;&#x4EE5;&#x540E;&#x66F4;&#x662F;&#x5982;&#x6B64;
      fullName() {
          return this.data.firstName + this.data.lastName
      }
  }
}
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><p>&#x8FD9;&#x6BB5;&#x4EE3;&#x7801;&#xFF0C;&#x600E;&#x4E48;&#x6837;&#x90FD;&#x8C08;&#x4E0D;&#x4E0A;&#x4F18;&#x96C5;&#xFF0C;&#x51D1;&#x5408;&#x7684;&#x628A;&#x529F;&#x80FD;&#x5B8C;&#x6210;&#x800C;&#x5DF2;&#xFF0C;&#x5E76;&#x4E14;&#x5BF9;&#x4E8E;<code>loading</code>&#x3001;<code>error</code>&#x7B49;&#x5904;&#x7406;&#x7684;&#x53EF;&#x590D;&#x7528;&#x6027;&#x4E3A;&#x96F6;&#x3002;</p>
<p>&#x6570;&#x636E;&#x548C;&#x903B;&#x8F91;&#x4E5F;&#x88AB;&#x5206;&#x6563;&#x5728;&#x4E86;&#x5404;&#x4E2A;<code>option</code>&#x4E2D;&#xFF0C;&#x8FD9;&#x8FD8;&#x53EA;&#x662F;&#x4E00;&#x4E2A;&#x903B;&#x8F91;&#xFF0C;&#x5982;&#x679C;&#x53C8;&#x591A;&#x4E86;&#x4E00;&#x4E9B;&#x903B;&#x8F91;&#xFF0C;&#x591A;&#x4E86;<code>data</code>&#x3001;<code>computed</code>&#x3001;<code>methods</code>&#xFF1F;&#x5982;&#x679C;&#x4F60;&#x662F;&#x4E00;&#x4E2A;&#x65B0;&#x63A5;&#x624B;&#x8FD9;&#x4E2A;&#x6587;&#x4EF6;&#x7684;&#x4EBA;&#xFF0C;&#x4F60;&#x5982;&#x4F55;&#x8FC5;&#x901F;&#x7684;&#x5206;&#x8FA8;&#x6E05;&#x695A;&#x8FD9;&#x4E2A;<code>method</code>&#x662F;&#x548C;&#x67D0;&#x4E24;&#x4E2A;<code>data</code>&#x4E2D;&#x7684;&#x5B57;&#x6BB5;&#x5173;&#x8054;&#x8D77;&#x6765;&#x7684;&#xFF1F;</p>
<p>&#x8BA9;&#x6211;&#x4EEC;&#x628A; <strong><a href="https://github.com/zeit/swr" target="_blank">zeit/swr</a></strong> &#x7684;&#x903B;&#x8F91;&#x7167;&#x642C;&#x5230; Vue3 &#x4E2D;&#xFF0C;</p>
<p>&#x770B;&#x4E00;&#x4E0B;<code>swr</code>&#x5728; Vue3 &#x4E2D;&#x7684;&#x8868;&#x73B0;&#xFF1A;</p>
<pre class="language-"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>error<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>failed to load<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-else-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>loading<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>loading...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-else</span><span class="token punctuation">&gt;</span></span>hello {{fullName}}!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span>
import { createComponent, computed } from &apos;vue&apos;
import useSWR from &apos;vue-swr&apos;

export default createComponent({
  setup() {
      // useSWR&#x5E2E;&#x4F60;&#x7BA1;&#x7406;&#x597D;&#x4E86;&#x53D6;&#x6570;&#x3001;&#x7F13;&#x5B58;&#x3001;&#x751A;&#x81F3;&#x6807;&#x7B7E;&#x9875;&#x805A;&#x7126;&#x91CD;&#x65B0;&#x8BF7;&#x6C42;&#x3001;&#x751A;&#x81F3;Suspense...
      const { data, loading, error } = useSWR(&apos;/api/user&apos;, fetcher)
      // &#x8F7B;&#x677E;&#x7684;&#x5B9A;&#x4E49;&#x8BA1;&#x7B97;&#x5C5E;&#x6027;
      const fullName = computed(() =&gt; data.firstName + data.lastName)  
      return { data, fullName, loading, error }
  }
})
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><p>&#x5C31;&#x662F;&#x8FD9;&#x4E48;&#x7B80;&#x5355;&#xFF0C;&#x5BF9;&#x5417;&#xFF1F;&#x903B;&#x8F91;&#x66F4;&#x52A0;&#x805A;&#x5408;&#x4E86;&#x3002;</p>
<p>&#x6709;&#x4EBA;&#x8981;&#x95EE;&#xFF0C;&#x5168;&#x90E8;&#x903B;&#x8F91;&#x90FD;&#x5199;&#x5728; setup &#x91CC;&#x4E86;&#xFF0C;&#x8FD9;&#x662F;&#x9762;&#x6761;&#x5F0F;&#x4EE3;&#x7801;&#xFF01;&#x800C;&#x4E14;&#x9488;&#x5BF9;&#x6211;&#x4E0A;&#x9762;&#x63D0;&#x51FA;&#x7684;&#x4EE3;&#x7801;&#x903B;&#x8F91;&#x5206;&#x6563;&#x7684;&#x95EE;&#x9898;&#xFF0C;&#x54EA;&#x91CC;&#x8FDB;&#x6B65;&#x4E86;&#x3002;</p>
<p>&#x90A3;&#x4E48;&#x6211;&#x4EEC;&#x7528;<code>&#x81EA;&#x5B9A;&#x4E49;hook</code>&#x628A;&#x903B;&#x8F91;&#x7EDF;&#x4E00;&#x62BD;&#x51FA;&#x6765;&#xFF1F;</p>
<pre class="language-"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>error<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>failed to load<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-else-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>loading<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>loading...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-else</span><span class="token punctuation">&gt;</span></span>hello {{fullName}}!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span>
import { createComponent, computed } from &apos;vue&apos;
import useSWR from &apos;vue-swr&apos;

export default createComponent({
  setup() {
    return { ...useName() }
  }
})

// &#x59D3;&#x540D;&#x76F8;&#x5173;&#x903B;&#x8F91;
function useName() {
   // useSWR&#x5E2E;&#x4F60;&#x7BA1;&#x7406;&#x597D;&#x4E86;&#x53D6;&#x6570;&#x3001;&#x7F13;&#x5B58;&#x3001;&#x751A;&#x81F3;&#x6807;&#x7B7E;&#x9875;&#x805A;&#x7126;&#x91CD;&#x65B0;&#x8BF7;&#x6C42;&#x3001;&#x751A;&#x81F3;Suspense...
   const { data, loading, error } = useSWR(&apos;/api/user&apos;, fetcher)
   // &#x8F7B;&#x677E;&#x7684;&#x5B9A;&#x4E49;&#x8BA1;&#x7B97;&#x5C5E;&#x6027;
   const fullName = computed(() =&gt; data.firstName + data.lastName)  
   return { data, fullName, loading, error }
}
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><p>&#x8FD9;&#x4E0B;&#x597D;&#x4E86;&#xFF0C;<code>useName</code>&#x8FD9;&#x4E2A; hook &#x751A;&#x81F3;&#x6210;&#x4E3A;&#x4E86;&#x4E00;&#x4E2A;&#x6240;&#x6709;&#x7EC4;&#x4EF6;&#x90FD;&#x53EF;&#x4EE5;&#x5171;&#x7528;&#x7684; hook&#x3002;&#x5728; Vue2 &#x91CC;&#xFF0C;&#x4F60;&#x600E;&#x4E48;&#x62BD;&#x53D6;&#xFF1F;&#x96BE;&#x9053;&#x7528;<code>mixins</code>&#xFF1F;</p>
<p>&#x90A3;&#x4E48;&#x4F60;&#x5E94;&#x8BE5;&#x770B;&#x8FD9;&#x7BC7;&#x77E5;&#x4E4E;&#xFF1A;<strong><a href="https://www.zhihu.com/question/67588479" target="_blank">&#x4E3A;&#x4F55;&#x4E0D;&#x8981;&#x7528; mixins &#x6765;&#x5B9E;&#x73B0;&#x7EC4;&#x4EF6;&#x590D;&#x7528;</a></strong></p>
<h3 id="vue3-&#x6E90;&#x7801;"><strong>Vue3 &#x6E90;&#x7801;</strong></h3>
<p>&#x5BF9;&#x4E8E;&#x54CD;&#x5E94;&#x5F0F;&#x90E8;&#x5206;&#xFF0C;&#x5982;&#x679C;&#x4F60;&#x5DF2;&#x7ECF;&#x975E;&#x5E38;&#x719F;&#x6089; Vue2 &#x7684;&#x54CD;&#x5E94;&#x5F0F;&#x539F;&#x7406;&#x4E86;&#xFF0C;&#x90A3;&#x4E48; Vue3 &#x7684;&#x54CD;&#x5E94;&#x5F0F;&#x539F;&#x7406;&#x5BF9;&#x4F60;&#x6765;&#x8BF4;&#x5E94;&#x8BE5;&#x6CA1;&#x6709;&#x592A;&#x5927;&#x7684;&#x96BE;&#x5EA6;&#x3002;&#x751A;&#x81F3;&#x5728;&#x5B66;&#x4E60;&#x4E4B;&#x4E2D;&#x4F60;&#x4F1A;&#x76F8;&#x4E92;&#x6BD4;&#x8F83;&#xFF0C;&#x77E5;&#x9053; Vue3 &#x4E3A;&#x4EC0;&#x4E48;&#x8FD9;&#x6837;&#x505A;&#x66F4;&#x597D;&#xFF0C;Vue2 &#x8FD8;&#x6709;&#x54EA;&#x90E8;&#x5206;&#x9700;&#x8981;&#x6539;&#x8FDB;&#x7B49;&#x7B49;&#x3002;</p>
<p>Vue3 &#x5176;&#x5B9E;&#x5C31;&#x662F;&#x628A;&#x5B9E;&#x73B0;&#x6362;&#x6210;&#x4E86;&#x66F4;&#x52A0;&#x5F3A;&#x5927;&#x7684; Proxy&#xFF0C;&#x5E76;&#x4E14;&#x628A;&#x54CD;&#x5E94;&#x5F0F;&#x90E8;&#x5206;&#x505A;&#x7684;&#x66F4;&#x52A0;&#x7684;&#x62BD;&#x8C61;&#xFF0C;&#x751A;&#x81F3;&#x53EF;&#x4EE5;&#xFF0C;&#x4E0D;&#x5F97;&#x4E0D;&#x8BF4;&#xFF0C;Vue3 &#x7684;&#x54CD;&#x5E94;&#x5F0F;&#x6A21;&#x578B;&#x66F4;&#x52A0;&#x63A5;&#x8FD1;<code>&#x54CD;&#x5E94;&#x5F0F;&#x7C7B;&#x5E93;</code>&#x7684;&#x6838;&#x5FC3;&#x4E86;&#xFF0C;&#x751A;&#x81F3;<code>react-easy-state</code>&#x7B49; React &#x7684;&#x54CD;&#x5E94;&#x5F0F;&#x72B6;&#x6001;&#x7BA1;&#x7406;&#x5E93;&#xFF0C;&#x4E5F;&#x662F;&#x7528;&#x8FD9;&#x5957;&#x7C7B;&#x4F3C;&#x7684;&#x6838;&#x5FC3;&#x505A;&#x51FA;&#x6765;&#x7684;&#x3002;</p>
<p>&#x518D;&#x6B21;&#x5F3A;&#x8C03;&#xFF0C;&#x975E;&#x5E38;&#x975E;&#x5E38;&#x63A8;&#x8350;&#x5B66;&#x4E60; Vue3 &#x7684;<code>@vue/reactivity</code>&#x8FD9;&#x4E2A;&#x5206;&#x5305;&#x3002;</p>
<p>&#x63A8;&#x4E00;&#x6CE2;&#x81EA;&#x5DF1;&#x7684;&#x6587;&#x7AE0;&#x5427;&#xFF0C;&#x7EC6;&#x81F4;&#x4E86;&#x8BB2;&#x89E3;&#x4E86; Vue3 &#x54CD;&#x5E94;&#x5F0F;&#x7684;&#x6838;&#x5FC3;&#x6D41;&#x7A0B;&#x3002;</p>
<ol>
<li><p><strong><a href="https://juejin.im/post/5e21196fe51d454d523be084" target="_blank">&#x5E26;&#x4F60;&#x5F7B;&#x5E95;&#x641E;&#x61C2; Vue3 &#x7684; Proxy &#x54CD;&#x5E94;&#x5F0F;&#x539F;&#x7406;&#xFF01;TypeScript &#x4ECE;&#x96F6;&#x5B9E;&#x73B0;&#x57FA;&#x4E8E; Proxy &#x7684;&#x54CD;&#x5E94;&#x5F0F;&#x5E93;&#x3002;</a></strong>  </p>
</li>
<li><p><strong><a href="https://juejin.im/post/5e23b20f51882510073eb571" target="_blank">&#x5E26;&#x4F60;&#x5F7B;&#x5E95;&#x641E;&#x61C2; Vue3 &#x7684; Proxy &#x54CD;&#x5E94;&#x5F0F;&#x539F;&#x7406;&#xFF01;&#x57FA;&#x4E8E;&#x51FD;&#x6570;&#x52AB;&#x6301;&#x5B9E;&#x73B0; Map &#x548C; Set &#x7684;&#x54CD;&#x5E94;&#x5F0F;</a></strong>  </p>
</li>
<li><p><strong><a href="https://juejin.im/post/5e2fdf29e51d45026866107d" target="_blank">&#x6DF1;&#x5EA6;&#x89E3;&#x6790;&#xFF1A;Vue3 &#x5982;&#x4F55;&#x5DE7;&#x5999;&#x7684;&#x5B9E;&#x73B0;&#x5F3A;&#x5927;&#x7684; computed</a></strong>  </p>
</li>
</ol>
<p>&#x5728;&#x5B66;&#x4E60;&#x4E4B;&#x540E;&#xFF0C;&#x6211;&#x628A;<code>@vue/reactivity</code>&#x5305;&#x8F7B;&#x677E;&#x7684;&#x96C6;&#x6210;&#x5230;&#x4E86; React &#x4E2D;&#xFF0C;&#x505A;&#x4E86;&#x4E00;&#x4E2A;&#x72B6;&#x6001;&#x7BA1;&#x7406;&#x7684;&#x5E93;&#xFF0C;&#x8FD9;&#x4E5F;&#x53E6;&#x4E00;&#x65B9;&#x9762;&#x4F50;&#x8BC1;&#x4E86;&#x8FD9;&#x4E2A;&#x5305;&#x7684;&#x62BD;&#x8C61;&#x7A0B;&#x5EA6;&#xFF1A;<br><strong><a href="https://juejin.im/post/5e70970af265da576429aada" target="_blank">40 &#x884C;&#x4EE3;&#x7801;&#x628A; Vue3 &#x7684;&#x54CD;&#x5E94;&#x5F0F;&#x96C6;&#x6210;&#x8FDB; React &#x505A;&#x72B6;&#x6001;&#x7BA1;&#x7406;</a></strong></p>
<h3 id="react"><strong>React</strong></h3>
<p>React &#x5DF2;&#x7ECF;&#x8FDB;&#x5165;&#x4E86; Hook &#x4E3A;&#x4E3B;&#x7684;&#x9636;&#x6BB5;&#xFF0C;&#x793E;&#x533A;&#x7684;&#x5404;&#x4E2A;&#x5E93;&#x4E5F;&#x90FD;&#x5728;&#x79EF;&#x6781;&#x62E5;&#x62B1; Hook&#xFF0C;&#x867D;&#x7136;&#x5B83;&#x8FD8;&#x6709;&#x5F88;&#x591A;&#x9677;&#x9631;&#x548C;&#x4E0D;&#x8DB3;&#xFF0C;&#x4F46;&#x662F;&#x8FD9;&#x57FA;&#x672C;&#x4E0A;&#x662F;&#x672A;&#x6765;&#x7684;&#x65B9;&#x5411;&#x6CA1;&#x8DD1;&#x4E86;&#x3002;&#x8FD9;&#x7BC7;&#x6587;&#x7AE0;&#x91CC;&#x6211;&#x4F1A;&#x51CF;&#x5C11; class &#x7EC4;&#x4EF6;&#x7684;&#x5F00;&#x53D1;&#x6280;&#x5DE7;&#x7684;&#x63D0;&#x53CA;&#xFF0C;&#x6BD5;&#x7ADF;&#x597D;&#x591A;&#x4E0D;&#x9519;&#x7684;&#x516C;&#x53F8;&#x4E5F;&#x5DF2;&#x7ECF;&#x5168;&#x9762;&#x62E5;&#x62B1; Hook &#x4E86;&#x3002;</p>
<h3 id="&#x719F;&#x7EC3;&#x5E94;&#x7528;"><strong>&#x719F;&#x7EC3;&#x5E94;&#x7528;</strong></h3>
<ol>
<li><p>&#x4F60;&#x5FC5;&#x987B;&#x638C;&#x63E1;&#x5B98;&#x7F51;&#x4E2D;&#x63D0;&#x5230;&#x7684;&#x6240;&#x6709;&#x6280;&#x5DE7;&#xFF0C;&#x5C31;&#x7B97;&#x6CA1;&#x6709;&#x4F7F;&#x7528;&#x8FC7;&#xFF0C;&#x4F60;&#x4E5F;&#x8981;&#x5927;&#x6982;&#x77E5;&#x9053;&#x8BE5;&#x5728;&#x4EC0;&#x4E48;&#x573A;&#x666F;&#x4F7F;&#x7528;&#x3002;  </p>
</li>
<li><p>&#x63A8;&#x8350; React &#x5C0F;&#x4E66;&#xFF0C;&#x867D;&#x7136;&#x4E66;&#x4E2D;&#x7684;&#x5F88;&#x591A; api &#x5DF2;&#x7ECF;&#x66F4;&#x65B0;&#x4E86;&#xFF0C;&#x4F46;&#x662F;&#x6838;&#x5FC3;&#x7684;&#x8BBE;&#x8BA1;&#x601D;&#x60F3;&#x8FD8;&#x662F;&#x6CA1;&#x6709;&#x53D8;<br><strong><a href="http://huziketang.mangojuice.top/books/react" target="_blank">React.js &#x5C0F;&#x4E66;</a></strong>  </p>
</li>
<li><p>&#x5173;&#x4E8E;&#x719F;&#x7EC3;&#x5E94;&#x7528;&#xFF0C;&#x5176;&#x5B9E;&#x6398;&#x91D1;&#x7684;&#x5C0F;&#x518C;&#x91CC;&#x6709;&#x51E0;&#x4E2A;&#x5B9D;&#x85CF;  </p>
</li>
<li><p>&#x8BDA;&#x8EAB;&#x5927;&#x4F6C;&#xFF08;&#x6084;&#x6084;&#x544A;&#x8BC9;&#x4F60;&#xFF0C;&#x4ED6;&#x7684;&#x804C;&#x7EA7;&#x975E;&#x5E38;&#x9AD8;&#xFF09;&#x7684;&#x4F01;&#x4E1A;&#x7EA7;&#x7BA1;&#x7406;&#x7CFB;&#x7EDF;&#x5C0F;&#x518C;&#xFF0C;&#x8FD9;&#x4E2A;&#x9879;&#x76EE;&#x91CC;&#x7684;&#x4EE3;&#x7801;&#x975E;&#x5E38;&#x6DF1;&#x5165;&#xFF0C;&#x800C;&#x4E14;&#x5728;&#x62BD;&#x8C61;&#x548C;&#x4F18;&#x5316;&#x65B9;&#x9762;&#x4E5F;&#x505A;&#x7684;&#x65E0;&#x53EF;&#x6311;&#x5254;&#xFF0C;&#x81EA;&#x5DF1;&#x62BD;&#x8C61;&#x4E86;<code>acl</code>&#x6743;&#x9650;&#x7BA1;&#x7406;&#x7CFB;&#x7EDF;&#x548C;<code>router</code>&#x8DEF;&#x7531;&#x7BA1;&#x7406;&#xFF0C;&#x5E76;&#x4E14;&#x5F15;&#x5165;&#x4E86;<code>reselect</code>&#x505A;&#x6027;&#x80FD;&#x4F18;&#x5316;&#xFF0C;&#x4E00;&#x5E74;&#x524D;&#x6211;&#x521D;&#x6B21;&#x8BFB;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x5F88;&#x591A;&#x5730;&#x65B9;&#x61F5;&#x61F5;&#x61C2;&#x61C2;&#xFF0C;&#x8FD9;&#x4E00;&#x5E74;&#x4E0B;&#x6765;&#x6211;&#x4E5F;&#x4ECE;&#x65E0;&#x5230;&#x6709;&#x7ECF;&#x624B;&#x4E86;&#x4E00;&#x5957;&#x5E26;<code>acl</code>&#x548C;<code>&#x6743;&#x9650;&#x8DEF;&#x7531;</code>&#x7684;&#x7BA1;&#x7406;&#x7CFB;&#x7EDF;&#x540E;&#xFF0C;&#x624D;&#x77E5;&#x9053;&#x4ED6;&#x7684;&#x62BD;&#x8C61;&#x80FD;&#x529B;&#x6709;&#x591A;&#x5F3A;&#x3002;&#x771F;&#x7684;&#x662F;<br>&#xF8FF; &#x521D;&#x95FB;&#x4E0D;&#x77E5;&#x66F2;&#x4E2D;&#x610F;&#xFF0C;&#x518D;&#x95FB;&#x5DF2;&#x662F;&#x66F2;&#x4E2D;&#x4EBA;&#x3002;<br>&#x201D;<br><strong><a href="https://juejin.im/book/5b1e15f76fb9a01e516d14a0" target="_blank">React &#x7EC4;&#x5408;&#x5F0F;&#x5F00;&#x53D1;&#x5B9E;&#x8DF5;&#xFF1A;&#x6253;&#x9020;&#x4F01;&#x4E1A;&#x7BA1;&#x7406;&#x7CFB;&#x7EDF;&#x4E94;&#x5927;&#x6838;&#x5FC3;&#x6A21;&#x5757;</a></strong>  </p>
</li>
<li><p>&#x4E09;&#x5143;&#x5927;&#x4F6C;&#x7684; React Hooks &#x4E0E; Immutable &#x6570;&#x636E;&#x6D41;&#x5B9E;&#x6218;&#xFF0C;&#x6DF1;&#x5165;&#x6D45;&#x51FA;&#x7684;&#x5E26;&#x4F60;&#x5B9E;&#x73B0;&#x4E00;&#x4E2A;&#x97F3;&#x4E50;&#x64AD;&#x653E;&#x5668;&#x3002;&#x4E09;&#x5143;&#x5927;&#x5BB6;&#x90FD;&#x8BA4;&#x8BC6;&#x5427;&#xFF1F;&#x90A3;&#x662F;&#x795E;&#xFF0C;&#x795E;&#x5E26;&#x4F60;&#x4EEC;&#x5199;&#x5E94;&#x7528;&#x9879;&#x76EE;&#xFF0C;&#x4E0D;&#x5B66;&#x80FD;&#x8BF4;&#x5F97;&#x8FC7;&#x53BB;&#x5417;&#xFF1F; <strong><a href="https://juejin.im/book/5da96626e51d4524ba0fd237" target="_blank">React Hooks &#x4E0E; Immutable &#x6570;&#x636E;&#x6D41;&#x5B9E;&#x6218;</a></strong>  </p>
</li>
<li><p>&#x6DF1;&#x5165;&#x7406;&#x89E3; React &#x4E2D;&#x7684;<code>key</code><br><strong><a href="https://kentcdodds.com/blog/understanding-reacts-key-prop" target="_blank">understanding-reacts-key-prop</a></strong><br><strong><a href="https://zhuanlan.zhihu.com/p/112917118" target="_blank">react &#x4E2D;&#x4E3A;&#x4F55;&#x63A8;&#x8350;&#x8BBE;&#x7F6E; key</a></strong>  </p>
</li>
<li><p>React &#x5B98;&#x65B9;&#x56E2;&#x961F;&#x6210;&#x5458;&#x5BF9;&#x4E8E;<code>&#x6D3E;&#x751F;&#x72B6;&#x6001;</code>&#x7684;&#x601D;&#x8003;&#xFF1A;<br><strong><a href="https://zh-hans.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html" target="_blank">you-probably-dont-need-derived-state</a></strong>  </p>
</li>
</ol>
<h3 id="react-hook"><strong>React Hook</strong></h3>
<p>&#x4F60;&#x5FC5;&#x987B;&#x719F;&#x7EC3;&#x638C;&#x63E1; Hook &#x7684;&#x6280;&#x5DE7;&#xFF0C;&#x9664;&#x4E86;&#x5B98;&#x7F51;&#x6587;&#x6863;&#x719F;&#x8BFB;&#x4EE5;&#x5916;&#xFF1A;</p>
<ol>
<li><p>&#x63A8;&#x8350; Dan &#x7684;&#x535A;&#x5BA2;&#xFF0C;&#x4ED6;&#x5C31;&#x662F; Hook &#x7684;&#x4EE3;&#x7801;&#x5B9E;&#x9645;&#x7F16;&#x5199;&#x8005;&#x4E4B;&#x4E00;&#xFF0C;&#x770B;&#x4ED6;&#x600E;&#x4E48;&#x8BF4;&#x591F;&#x6743;&#x5A01;&#x4E86;&#x5427;&#xFF1F;&#x8FD9;&#x91CC;&#x8D34;&#x5FC3;&#x7684;&#x9001;&#x4E0A;&#x6C49;&#x5316;&#x7248;&#x3002;<br><strong><a href="https://overreacted.io/zh-hans/a-complete-guide-to-useeffect/" target="_blank">useEffect &#x5B8C;&#x6574;&#x6307;&#x5357;</a></strong><br>&#x770B;&#x5B8C;&#x8FD9;&#x7BC7;&#x4EE5;&#x540E;&#xFF0C;&#x8FDB;&#x5165; <strong><a href="https://overreacted.io/zh-hans" target="_blank">dan &#x7684;&#x535A;&#x5BA2;&#x4E3B;&#x9875;</a></strong>&#xFF0C;&#x627E;&#x51FA;&#x6240;&#x6709;&#x548C; Hook &#x6709;&#x5173;&#x7684;&#xFF0C;&#x5168;&#x90E8;&#x7CBE;&#x8BFB;&#xFF01;  </p>
</li>
<li><p>&#x63A8;&#x8350;&#x9EC4;&#x5B50;&#x6BC5;&#x5927;&#x4F6C;&#x7684;&#x7CBE;&#x8BFB;&#x5468;&#x520A;&#x7CFB;&#x5217;<br><strong><a href="https://github.com/dt-fe/weekly/blob/v2/096.%E7%B2%BE%E8%AF%BB%E3%80%8AuseEffect%20%E5%AE%8C%E5%85%A8%E6%8C%87%E5%8D%97%E3%80%8B.md" target="_blank">096. &#x7CBE;&#x8BFB;&#x300A;useEffect &#x5B8C;&#x5168;&#x6307;&#x5357;&#x300B;.md</a></strong><br>&#x6CE8;&#x610F;&#xFF01;&#x4E0D;&#x662F;&#x53EA;&#x770B;&#x8FD9;&#x4E00;&#x7BC7;&#xFF0C;&#x800C;&#x662F;&#x8FD9;&#x4E2A;&#x4ED3;&#x5E93;&#x91CC;&#x6240;&#x6709;&#x6709;&#x5173;&#x4E8E; React Hook &#x7684;&#x6587;&#x7AE0;&#x90FD;&#x53BB;&#x770B;&#x4E00;&#x904D;&#xFF0C;&#x7ED3;&#x5408;&#x81EA;&#x5DF1;&#x7684;&#x601D;&#x60F3;&#x5206;&#x6790;&#x3002;  </p>
</li>
<li><p>Hook &#x9677;&#x9631;&#x7CFB;&#x5217; &#x8FD8;&#x662F; Dan &#x8001;&#x54E5;&#x7684;&#x6587;&#x7AE0;&#xFF0C;&#x8BE6;&#x7EC6;&#x7684;&#x8BB2;&#x6E05;&#x695A;&#x4E86;&#x6240;&#x8C13;<code>&#x95ED;&#x5305;&#x9677;&#x9631;</code>&#x4EA7;&#x751F;&#x7684;&#x539F;&#x56E0;&#x548C;&#x8BBE;&#x8BA1;&#x4E2D;&#x7684;&#x6743;&#x8861;&#x3002;<br><strong><a href="https://overreacted.io/zh-hans/how-are-function-components-different-from-classes/" target="_blank">&#x51FD;&#x6570;&#x5F0F;&#x7EC4;&#x4EF6;&#x4E0E;&#x7C7B;&#x7EC4;&#x4EF6;&#x6709;&#x4F55;&#x4E0D;&#x540C;&#xFF1F;</a></strong>  </p>
</li>
<li><p>&#x53BB;&#x627E;&#x4E00;&#x4E9B;&#x793E;&#x533A;&#x7684;&#x7CBE;&#x54C1;&#x81EA;&#x5B9A;&#x4E49; hook&#xFF0C;&#x770B;&#x770B;&#x4ED6;&#x4EEC;&#x7684;&#x5F00;&#x53D1;&#x548C;&#x8BBE;&#x8BA1;&#x601D;&#x8DEF;&#xFF0C;&#x6709;&#x6CA1;&#x6709;&#x80FD;&#x878D;&#x5165;&#x81EA;&#x5DF1;&#x7684;&#x65E5;&#x5E38;&#x5F00;&#x53D1;&#x4E2D;&#x53BB;&#x7684;&#x3002;<br><strong><a href="https://segmentfault.com/a/1190000020964640" target="_blank">&#x7CBE;&#x8BFB;&#x300A;Hooks &#x53D6;&#x6570; - swr &#x6E90;&#x7801;&#x300B;</a></strong><br><strong><a href="https://zhuanlan.zhihu.com/p/103150605?utm_source=wechat_session" target="_blank">Umi Hooks - &#x52A9;&#x529B;&#x62E5;&#x62B1; React Hooks</a></strong><br><strong><a href="https://zhuanlan.zhihu.com/p/106665408" target="_blank">React Hooks &#x7684;&#x4F53;&#x7CFB;&#x8BBE;&#x8BA1;&#x4E4B;&#x4E00; - &#x5206;&#x5C42;</a></strong>  </p>
</li>
</ol>
<h3 id="react-&#x6027;&#x80FD;&#x4F18;&#x5316;"><strong>React &#x6027;&#x80FD;&#x4F18;&#x5316;</strong></h3>
<p>React &#x4E2D;&#x4F18;&#x5316;&#x7EC4;&#x4EF6;&#x91CD;&#x6E32;&#x67D3;&#xFF0C;&#x8FD9;&#x91CC;&#x6709;&#x51E0;&#x4E2A;&#x9690;&#x542B;&#x7684;&#x77E5;&#x8BC6;&#x70B9;&#x3002;<br><strong><a href="https://kentcdodds.com/blog/optimize-react-re-renders" target="_blank">optimize-react-re-renders</a></strong></p>
<p>&#x5982;&#x4F55;&#x5BF9; React &#x51FD;&#x6570;&#x5F0F;&#x7EC4;&#x4EF6;&#x8FDB;&#x884C;&#x6027;&#x80FD;&#x4F18;&#x5316;&#xFF1F;&#x8FD9;&#x7BC7;&#x6587;&#x7AE0;&#x8BB2;&#x7684;&#x5F88;&#x8BE6;&#x7EC6;&#xFF0C;&#x503C;&#x5F97;&#x4ED4;&#x7EC6;&#x9605;&#x8BFB;&#x4E00;&#x904D;&#x3002; <a href="&#x5982;&#x4F55;&#x5BF9;%20React%20&#x51FD;&#x6570;&#x5F0F;&#x7EC4;&#x4EF6;&#x8FDB;&#x884C;&#x4F18;&#x5316;"><a href="https://juejin.im/post/5dd337985188252a1873730f" target="_blank">https://juejin.im/post/5dd337985188252a1873730f</a></a></p>
<h3 id="react-&#x5355;&#x5143;&#x6D4B;&#x8BD5;"><strong>React &#x5355;&#x5143;&#x6D4B;&#x8BD5;</strong></h3>
<ol>
<li><p>&#x4F7F;&#x7528;<code>@testing-library/react</code>&#x6D4B;&#x8BD5;&#x7EC4;&#x4EF6;&#xFF0C;&#x8FD9;&#x4E2A;&#x5E93;&#x76F8;&#x6BD4;&#x8D77; enzyme &#x66F4;&#x597D;&#x7684;&#x539F;&#x56E0;&#x5728;&#x4E8E;&#xFF0C;&#x5B83;&#x66F4;&#x6CE8;&#x91CD;&#x4E8E;<strong>&#x7AD9;&#x5728;&#x7528;&#x6237;&#x7684;&#x89D2;&#x5EA6;</strong>&#x53BB;&#x6D4B;&#x8BD5;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;&#xFF0C;&#x800C;&#x4E0D;&#x662F;&#x6D4B;&#x8BD5;&#x8FD9;&#x4E2A;&#x7EC4;&#x4EF6;&#x7684;<strong>&#x5B9E;&#x73B0;&#x7EC6;&#x8282;</strong>&#x3002;<br><strong><a href="https://kentcdodds.com/blog/introducing-the-react-testing-library" target="_blank">Introducing The React Testing Library</a></strong><br><strong><a href="https://kentcdodds.com/blog/testing-implementation-details" target="_blank">Testing Implementation Details</a></strong>  </p>
</li>
<li><p>&#x4F7F;&#x7528;<code>@testing-library/react-hooks</code>&#x6D4B;&#x8BD5;&#x81EA;&#x5B9A;&#x4E49; Hook<br><strong><a href="https://kentcdodds.com/blog/how-to-test-custom-react-hooks" target="_blank">how-to-test-custom-react-hooks</a></strong>  </p>
</li>
</ol>
<h3 id="react-&#x548C;-typescript-&#x7ED3;&#x5408;&#x4F7F;&#x7528;"><strong>React &#x548C; TypeScript &#x7ED3;&#x5408;&#x4F7F;&#x7528;</strong></h3>
<ol>
<li><p>&#x8FD9;&#x4E2A;&#x4ED3;&#x5E93;&#x975E;&#x5E38;&#x8BE6;&#x7EC6;&#x7684;&#x4ECB;&#x7ECD;&#x4E86;&#x5982;&#x4F55;&#x628A; React &#x548C; TypeScript &#x7ED3;&#x5408;&#xFF0C;&#x5E76;&#x4E14;&#x7ED9;&#x51FA;&#x4E86;&#x4E00;&#x4E9B;&#x8FDB;&#x9636;&#x7528;&#x6CD5;&#x7684;&#x793A;&#x4F8B;&#xFF0C;&#x975E;&#x5E38;&#x503C;&#x5F97;&#x8FC7;&#x4E00;&#x904D;&#xFF01;<br><strong><a href="https://github.com/typescript-cheatsheets/react-typescript-cheatsheet" target="_blank">react-typescript-cheatsheet</a></strong>  </p>
</li>
<li><p>&#x8FD9;&#x7BC7;&#x6587;&#x7AE0;&#x662F;&#x8682;&#x8681;&#x91D1;&#x670D;&#x6570;&#x636E;&#x4F53;&#x9A8C;&#x6280;&#x672F;&#x90E8;&#x7684;&#x540C;&#x5B66;&#x5E26;&#x6765;&#x7684;&#xFF0C;&#x5176;&#x5B9E;&#x9664;&#x4E86;&#x8FD9;&#x91CC;&#x9762;&#x7684;&#x6280;&#x672F;&#x6587;&#x7AE0;&#x4EE5;&#x5916;&#xFF0C;&#x8682;&#x8681;&#x91D1;&#x670D;&#x7684;&#x540C;&#x5B66;&#x4E5F;&#x7531;&#x975E;&#x5E38;&#x751F;&#x52A8;&#x7ED9;&#x6211;&#x4EEC;&#x8BB2;&#x89E3;&#x4E86;&#x4E00;&#x4E2A;&#x9AD8;&#x7EA7;&#x524D;&#x7AEF;&#x540C;&#x5B66;&#x662F;&#x5982;&#x4F55;&#x53BB;&#x793E;&#x533A;&#x5BFB;&#x627E;&#x65B9;&#x6848;&#xFF0C;&#x5982;&#x4F55;&#x601D;&#x8003;&#x548C;&#x843D;&#x5730;&#x5230;&#x9879;&#x76EE;&#x4E2D;&#x7684;&#xFF0C;&#x7531;&#x8877;&#x7684;&#x4F69;&#x670D;&#x3002;<br><strong><a href="https://juejin.im/post/5dccc9b8e51d4510840165e2" target="_blank">React + Typescript &#x5DE5;&#x7A0B;&#x5316;&#x6CBB;&#x7406;&#x5B9E;&#x8DF5;</a></strong>  </p>
</li>
<li><p>&#x5FAE;&#x8F6F;&#x7684;&#x5927;&#x4F6C;&#x5E26;&#x4F60;&#x5199;&#x4E00;&#x4E2A;&#x7C7B;&#x578B;&#x5B89;&#x5168;&#x7684;&#x7EC4;&#x4EF6;&#xFF0C;&#x975E;&#x5E38;&#x6DF1;&#x5165;&#xFF0C;&#x975E;&#x5E38;&#x8FC7;&#x763E;...<br><strong><a href="https://blog.andrewbran.ch/polymorphic-react-components/" target="_blank">Writing Type-Safe Polymorphic React Components (Without Crashing TypeScript)</a></strong>  </p>
</li>
<li><p>React + TypeScript 10 &#x4E2A;&#x9700;&#x8981;&#x907F;&#x514D;&#x7684;&#x9519;&#x8BEF;&#x6A21;&#x5F0F;&#x3002;<br><strong><a href="https://medium.com/@martin_hotell/10-typescript-pro-tips-patterns-with-or-without-react-5799488d6680" target="_blank">10-typescript-pro-tips-patterns-with-or-without-react</a></strong>  </p>
</li>
</ol>
<h3 id="react-&#x4EE3;&#x7801;&#x62BD;&#x8C61;&#x601D;&#x8003;"><strong>React &#x4EE3;&#x7801;&#x62BD;&#x8C61;&#x601D;&#x8003;</strong></h3>
<ol>
<li><p>&#x4F55;&#x65F6;&#x5E94;&#x8BE5;&#x628A;&#x4EE3;&#x7801;&#x62C6;&#x5206;&#x4E3A;&#x7EC4;&#x4EF6;&#xFF1F;<br><strong><a href="https://kentcdodds.com/blog/when-to-break-up-a-component-into-multiple-components" target="_blank">when-to-break-up-a-component-into-multiple-components</a></strong>  </p>
</li>
<li><p>&#x4ED4;&#x7EC6;&#x601D;&#x8003;&#x4F60;&#x7684; React &#x5E94;&#x7528;&#x4E2D;&#xFF0C;&#x72B6;&#x6001;&#x5E94;&#x8BE5;&#x653E;&#x5728;&#x4EC0;&#x4E48;&#x4F4D;&#x7F6E;&#xFF0C;&#x662F;&#x7EC4;&#x4EF6;&#x81EA;&#x8EAB;&#xFF0C;&#x63D0;&#x5347;&#x5230;&#x7236;&#x7EC4;&#x4EF6;&#xFF0C;&#x4EA6;&#x6216;&#x662F;&#x5C40;&#x90E8; context &#x548C; redux&#xFF0C;&#x8FD9;&#x4F1A;&#x6709;&#x76CA;&#x4E8E;&#x63D0;&#x5347;&#x5E94;&#x7528;&#x7684;&#x6027;&#x80FD;&#x548C;&#x53EF;&#x7EF4;&#x62A4;&#x6027;&#x3002;<br><strong><a href="https://kentcdodds.com/blog/state-colocation-will-make-your-react-app-faster/" target="_blank">state-colocation-will-make-your-react-app-faster</a></strong>  </p>
</li>
<li><p>&#x4ED4;&#x7EC6;&#x601D;&#x8003; React &#x7EC4;&#x4EF6;&#x4E2D;&#x7684;&#x72B6;&#x6001;&#x5E94;&#x8BE5;&#x5982;&#x4F55;&#x7BA1;&#x7406;&#xFF0C;&#x4F18;&#x5148;&#x4F7F;&#x7528;&#x6D3E;&#x751F;&#x72B6;&#x6001;&#xFF0C;&#x5E76;&#x4E14;&#x5728;&#x9002;&#x5F53;&#x7684;&#x65F6;&#x5019;&#x5229;&#x7528; useMemo&#x3001;reselect &#x7B49;&#x5E93;&#x53BB;&#x4F18;&#x5316;&#x4ED6;&#x4EEC;&#x3002;<br><strong><a href="https://kentcdodds.com/blog/dont-sync-state-derive-it" target="_blank">dont-sync-state-derive-it</a></strong>  </p>
</li>
<li><p>React Hooks &#x7684;&#x81EA;&#x5B9A;&#x4E49; hook &#x4E2D;&#xFF0C;&#x5982;&#x4F55;&#x5229;&#x7528; reducer &#x7684;&#x6A21;&#x5F0F;&#x63D0;&#x4F9B;&#x66F4;&#x52A0;&#x7075;&#x6D3B;&#x7684;&#x6570;&#x636E;&#x7BA1;&#x7406;&#xFF0C;&#x8BA9;&#x7528;&#x6237;&#x62E5;&#x6709;&#x6570;&#x636E;&#x7684;&#x63A7;&#x5236;&#x6743;&#x3002;<br><strong><a href="https://kentcdodds.com/blog/the-state-reducer-pattern-with-react-hooks" target="_blank">the-state-reducer-pattern-with-react-hooks</a></strong>  </p>
</li>
</ol>
<h2 id="typescript"><strong>TypeScript</strong></h2>
<p>&#x81EA;&#x4ECE; Vue3 &#x6A2A;&#x7A7A;&#x51FA;&#x4E16;&#x4EE5;&#x6765;&#xFF0C;TypeScript &#x597D;&#x50CF;&#x7A81;&#x7136;&#x5C31;&#x706B;&#x4E86;&#x3002;&#x8FD9;&#x662F;&#x4E00;&#x4EF6;&#x597D;&#x4E8B;&#xFF0C;&#x63A8;&#x52A8;&#x524D;&#x7AEF;&#x53BB;&#x5B66;&#x4E60;&#x5F3A;&#x7C7B;&#x578B;&#x8BED;&#x8A00;&#xFF0C;&#x5F00;&#x53D1;&#x66F4;&#x52A0;&#x4E25;&#x8C28;&#x3002;&#x5E76;&#x4E14;&#x7B2C;&#x4E09;&#x65B9;&#x5305;&#x7684; ts &#x7C7B;&#x578B;&#x652F;&#x6301;&#x7684;&#x52A0;&#x5165;&#xFF0C;&#x8BA9;&#x6211;&#x4EEC;&#x751A;&#x81F3;&#x5F88;&#x591A;&#x65F6;&#x5019;&#x90FD;&#x4E0D;&#x518D;&#x9700;&#x8981;&#x6253;&#x5F00;&#x6587;&#x6863;&#x5BF9;&#x7740; api &#x64B8;&#x4E86;&#x3002;</p>
<p>&#x5173;&#x4E8E; TypeScript &#x5B66;&#x4E60;&#xFF0C;&#x5176;&#x5B9E;&#x51E0;&#x4E2A;&#x6708;&#x524D;&#x6211;&#x8FD8;&#x5BF9;&#x4E8E;&#x8FD9;&#x95E8; JavaScript &#x7684;&#x8D85;&#x96C6;&#x4E00;&#x7A8D;&#x4E0D;&#x901A;&#xFF0C;&#x7ECF;&#x8FC7;&#x4E24;&#x4E09;&#x4E2A;&#x6708;&#x7684;&#x9759;&#x5FC3;&#x5B66;&#x4E60;&#xFF0C;&#x6211;&#x80FD;&#x591F;&#x53BB;&#x7406;&#x89E3;&#x4E00;&#x4E9B;&#x76F8;&#x5BF9;&#x590D;&#x6742;&#x7684;&#x7C7B;&#x578B;&#x4E86;&#xFF0C;</p>
<p>&#x53EF;&#x4EE5;&#x8BF4; TypeScript &#x7684;&#x5B66;&#x4E60;&#x548C;&#x5B66;&#x4E00;&#x4E2A;&#x5E93;&#x6216;&#x8005;&#x5B66;&#x4E00;&#x4E2A;&#x6846;&#x67B6;&#x662F;&#x5B8C;&#x5168;&#x4E0D;&#x540C;&#x7684;&#xFF0C;</p>
<h3 id="&#x5165;&#x95E8;"><strong>&#x5165;&#x95E8;</strong></h3>
<ol>
<li>&#x6398;&#x91D1;&#x7684;&#x5C0F;&#x518C;&#xFF0C;&#x6DF1;&#x5165;&#x6D45;&#x51FA; TypeScript&#xFF1A;&#x4ECE;&#x57FA;&#x7840;&#x77E5;&#x8BC6;&#x5230;&#x7C7B;&#x578B;&#x7F16;&#x7A0B;&#xFF0C;&#x8BB2;&#x89E3;&#x7684;&#x975E;&#x5E38;&#x901A;&#x4FD7;&#x6613;&#x61C2;&#x3002;</li>
</ol>
<p>![][img-2]</p>
<ol>
<li><p>&#x9664;&#x4E86;&#x5B98;&#x65B9;&#x6587;&#x6863;&#x4EE5;&#x5916;&#xFF0C;&#x8FD8;&#x6709;&#x4E00;&#x4E9B;&#x6BD4;&#x8F83;&#x597D;&#x7684;&#x4E2D;&#x6587;&#x5165;&#x95E8;&#x6559;&#x7A0B;&#x3002;<br><strong><a href="https://zhongsp.gitbooks.io/typescript-handbook/content/" target="_blank">TypeScript Handbook &#x5165;&#x95E8;&#x6559;&#x7A0B;</a></strong>  </p>
</li>
<li><p>TypeScript Deep Dive &#x975E;&#x5E38;&#x9AD8;&#x8D28;&#x91CF;&#x7684;&#x82F1;&#x6587;&#x5165;&#x95E8;&#x6559;&#x5B66;&#x3002;<br><strong><a href="https://basarat.gitbook.io/typescript/type-system" target="_blank">TypeScript Deep Dive</a></strong>  </p>
</li>
<li><p>&#x5DE5;&#x5177;&#x6CDB;&#x578B;&#x5728;&#x65E5;&#x5E38;&#x5F00;&#x53D1;&#x4E2D;&#x90FD;&#x975E;&#x5E38;&#x7684;&#x5E38;&#x7528;&#xFF0C;&#x5FC5;&#x987B;&#x719F;&#x7EC3;&#x638C;&#x63E1;&#x3002;<br><strong><a href="https://zhuanlan.zhihu.com/p/40311981" target="_blank">TS &#x4E00;&#x4E9B;&#x5DE5;&#x5177;&#x6CDB;&#x578B;&#x7684;&#x4F7F;&#x7528;&#x53CA;&#x5176;&#x5B9E;&#x73B0;</a></strong>  </p>
</li>
<li><p>&#x89C6;&#x9891;&#x8BFE;&#x7A0B;&#xFF0C;&#x8FD8;&#x662F;&#x9EC4;&#x8F76;&#x5927;&#x4F6C;&#x7684;&#xFF0C;&#x5E76;&#x4E14;&#x8FD9;&#x4E2A;&#x8BFE;&#x7A0B;&#x5BF9;&#x4E8E;&#x5355;&#x5143;&#x6D4B;&#x8BD5;&#x3001;&#x524D;&#x7AEF;&#x624B;&#x5199;&#x6846;&#x67B6;&#x3001;&#x4EE5;&#x53CA;&#x7F51;&#x7EDC;&#x8BF7;&#x6C42;&#x539F;&#x7406;&#x90FD;&#x975E;&#x5E38;&#x6709;&#x5E2E;&#x52A9;&#x3002;<br><strong><a href="https://coding.imooc.com/class/330.html" target="_blank">&#x57FA;&#x4E8E; TypeScript &#x4ECE;&#x96F6;&#x91CD;&#x6784; axios</a></strong>  </p>
</li>
</ol>
<h3 id="&#x8FDB;&#x9636;"><strong>&#x8FDB;&#x9636;</strong></h3>
<ol>
<li><p>&#x8FD9;&#x4E94;&#x7BC7;&#x6587;&#x7AE0;&#x91CC;&#x501F;&#x52A9;&#x975E;&#x5E38;&#x591A;&#x7684;&#x6848;&#x4F8B;&#xFF0C;&#x4E3A;&#x6211;&#x4EEC;&#x8BB2;&#x89E3;&#x4E86; ts &#x7684;&#x4E00;&#x4E9B;&#x9AD8;&#x7EA7;&#x7528;&#x6CD5;&#xFF0C;&#x8BF7;&#x52A1;&#x5FC5;&#x53CD;&#x590D;&#x5728; ide &#x91CC;&#x5C1D;&#x8BD5;&#xFF0C;&#x7406;&#x89E3;&#xFF0C;&#x4E0D;&#x61C2;&#x7684;&#x6982;&#x5FF5;&#x53CA;&#x65F6;&#x56DE;&#x5230;&#x6587;&#x6863;&#x4E2D;&#x8865;&#x4E60;&#x3002;<br><strong><a href="https://juejin.im/post/5c8a518ee51d455e4d719e2e" target="_blank">&#x5DE7;&#x7528; TypeScript &#x7CFB;&#x5217; &#x4E00;&#x5171;&#x4E94;&#x7BC7;</a></strong>  </p>
</li>
<li><p>TS &#x8FDB;&#x9636;&#x975E;&#x5E38;&#x91CD;&#x8981;&#x7684;&#x4E00;&#x70B9;&#xFF0C;&#x6761;&#x4EF6;&#x7C7B;&#x578B;&#xFF0C;&#x5F88;&#x591A;&#x6CDB;&#x578B;&#x63A8;&#x5BFC;&#x90FD;&#x9700;&#x8981;&#x501F;&#x52A9;&#x5B83;&#x7684;&#x529B;&#x91CF;&#x3002;<br><strong><a href="https://mariusschulz.com/blog/conditional-types-in-typescript" target="_blank">conditional-types-in-typescript</a></strong>  </p>
</li>
<li><p>&#x4EE5;&#x53CA;&#x4E0A;&#x9762;&#x90A3;&#x4E2A;&#x5927;&#x4F6C;&#x535A;&#x5BA2;&#x4E2D;&#x7684;&#x6240;&#x6709; TS &#x6587;&#x7AE0;&#x3002;<br><a href="https://mariusschulz.com" target="_blank">https://mariusschulz.com</a>  </p>
</li>
</ol>
<h3 id="&#x5B9E;&#x6218;"><strong>&#x5B9E;&#x6218;</strong></h3>
<ol>
<li><p>&#x4E00;&#x4E2A;&#x53C2;&#x6570;&#x7B80;&#x5316;&#x7684;&#x5B9E;&#x6218;&#xFF0C;&#x6D89;&#x53CA;&#x5230;&#x7684;&#x9AD8;&#x7EA7;&#x77E5;&#x8BC6;&#x70B9;&#x975E;&#x5E38;&#x591A;&#x3002;  </p>
</li>
<li><p>TypeScript &#x7684;&#x9AD8;&#x7EA7;&#x7C7B;&#x578B;&#xFF08;Advanced Type&#xFF09;</p>
</li>
<li>Conditional Types (&#x6761;&#x4EF6;&#x7C7B;&#x578B;)</li>
<li>Distributive conditional types (&#x5206;&#x5E03;&#x6761;&#x4EF6;&#x7C7B;&#x578B;)</li>
<li>Mapped types&#xFF08;&#x6620;&#x5C04;&#x7C7B;&#x578B;&#xFF09;</li>
<li><p>&#x51FD;&#x6570;&#x91CD;&#x8F7D; <a href="https://juejin.im/post/5e38dd65518825492b509dd6" target="_blank">br/&gt;TypeScript &#x53C2;&#x6570;&#x7B80;&#x5316;&#x5B9E;&#x6218;</a></p>
</li>
<li><p>&#x5B9E;&#x73B0;&#x4E00;&#x4E2A;&#x7B80;&#x5316;&#x7248;&#x7684; Vuex&#xFF0C;&#x540C;&#x6837;&#x77E5;&#x8BC6;&#x70B9;&#x7ED3;&#x5408;&#x6EE1;&#x6EE1;&#x3002;  </p>
</li>
<li><p>TypeScript &#x7684;&#x9AD8;&#x7EA7;&#x7C7B;&#x578B;&#xFF08;<strong><a href="https://www.typescriptlang.org/docs/handbook/advanced-types.html" target="_blank">Advanced Type</a></strong>&#xFF09;</p>
</li>
<li>TypeScript &#x4E2D;&#x5229;&#x7528;&#x6CDB;&#x578B;&#x8FDB;&#x884C;&#x53CD;&#x5411;&#x7C7B;&#x578B;&#x63A8;&#x5BFC;&#x3002;(<strong><a href="https://www.typescriptlang.org/docs/handbook/generics.html" target="_blank">Generics</a></strong>)</li>
<li>Mapped types&#xFF08;&#x6620;&#x5C04;&#x7C7B;&#x578B;&#xFF09;</li>
<li>Distributive Conditional Types&#xFF08;&#x6761;&#x4EF6;&#x7C7B;&#x578B;&#x5206;&#x914D;&#xFF09;</li>
<li>TypeScript &#x4E2D; Infer &#x7684;&#x5B9E;&#x6218;&#x5E94;&#x7528;&#xFF08;<strong><a href="https://github.com/vuejs/vue-next/blob/985f4c91d9d3f47e1314d230c249b3faf79c6b90/packages/reactivity/src/ref.ts#L89" target="_blank">Vue3 &#x6E90;&#x7801;&#x91CC; infer &#x7684;&#x4E00;&#x4E2A;&#x5F88;&#x91CD;&#x8981;&#x7684;&#x4F7F;&#x7528;</a></strong>&#xFF09;<a href="https://juejin.im/post/5e38dd65518825492b509dd6" target="_blank">br/&gt;TS &#x5B9E;&#x73B0;&#x667A;&#x80FD;&#x7C7B;&#x578B;&#x63A8;&#x5BFC;&#x7684;&#x7B80;&#x5316;&#x7248; Vuex</a></li>
</ol>
<h3 id="&#x523B;&#x610F;&#x8BAD;&#x7EC3;"><strong>&#x523B;&#x610F;&#x8BAD;&#x7EC3;</strong></h3>
<p>&#x5B83;&#x51E0;&#x4E4E;&#x662F;&#x4E00;&#x95E8;&#x65B0;&#x7684;&#x8BED;&#x8A00;&#xFF08;&#x5728;&#x7C7B;&#x578B;&#x4E16;&#x754C;&#x91CC;&#x6765;&#x8BF4;&#xFF09;&#xFF0C;&#x9700;&#x8981;&#x4F60;&#x82B1;&#x8D39;&#x5F88;&#x5927;&#x7684;&#x7CBE;&#x529B;&#x53BB;&#x5B66;&#x597D;&#x5B83;&#x3002;</p>
<p>&#x6211;&#x5BF9;&#x4E8E; TypeScript &#x7684;&#x5B66;&#x4E60;&#x5EFA;&#x8BAE;&#x5176;&#x5B9E;&#x5C31;&#x662F;&#x4E00;&#x4E2A;&#x5173;&#x952E;&#x8BCD;&#xFF1A;<code>&#x523B;&#x610F;&#x8BAD;&#x7EC3;</code>&#xFF0C;&#x5728;&#x8FC7;&#x57FA;&#x7840;&#x6982;&#x5FF5;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x4E0D;&#x538C;&#x5176;&#x70E6;&#x7684;&#x5728;<code>vscode</code>&#x4E2D;&#x6572;&#x51FB;&#xFF0C;&#x7406;&#x89E3;&#xFF0C;&#x601D;&#x8003;&#x3002;&#x5728;&#x57FA;&#x7840;&#x6982;&#x5FF5;&#x8FC7;&#x5B8C;&#x4EE5;&#x540E;&#x53BB;&#x5BFB;&#x627E;&#x5B9E;&#x8DF5;&#x6587;&#x7AE0;&#xFF0C;&#x6BD4;&#x5982;&#x6211;&#x4E0A;&#x9762;<code>&#x8FDB;&#x9636;</code>&#x548C;<code>&#x5B9E;&#x6218;</code>&#x90E8;&#x5206;&#x63A8;&#x8350;&#x7684;&#x51E0;&#x7BC7;&#xFF0C;&#x7EE7;&#x7EED;<code>&#x523B;&#x610F;&#x8BAD;&#x7EC3;</code>&#xFF0C;&#x4E00;&#x5B9A;&#x8981;&#x5806;&#x79EF;&#x4EE3;&#x7801;&#x91CF;&#xFF0C;&#x5B66;&#x4E60;&#x4E00;&#x95E8;&#x65B0;&#x7684;&#x8BED;&#x8A00;&#x662F;&#x4E0D;&#x53EF;&#x80FD;&#x9760;&#x770B;&#x6587;&#x6863;&#x83B7;&#x5F97;&#x6210;&#x529F;&#x7684;&#x3002;</p>
<p>&#x6211;&#x4F1A;&#x5EFA;&#x7ACB;&#x4E00;&#x4E2A;&#x4ED3;&#x5E93;&#xFF0C;&#x4E13;&#x95E8;&#x8BB0;&#x5F55;&#x6211;&#x9047;&#x5230;&#x7684; <strong><a href="https://github.com/sl1673495/typescript-codes" target="_blank">TypeScript &#x7684;&#x6709;&#x8DA3;&#x4EE3;&#x7801;</a></strong>&#xFF0C;&#x81EA;&#x5DF1;&#x52A8;&#x624B;&#x6572;&#x4E00;&#x904D;&#xFF0C;&#x5E76;&#x4E14;&#x6DF1;&#x5165;&#x7406;&#x89E3;&#x3002;</p>
<h3 id="&#x80FD;&#x529B;&#x5206;&#x7EA7;"><strong>&#x80FD;&#x529B;&#x5206;&#x7EA7;</strong></h3>
<p>&#x5176;&#x5B9E; TypeScript &#x7684;&#x80FD;&#x529B;&#x4E5F;&#x662F;&#x4E24;&#x7EA7;&#x5206;&#x5316;&#x7684;&#xFF0C;&#x65E5;&#x5E38;&#x5199;&#x4E1A;&#x52A1;&#x6765;&#x8BF4;&#xFF0C;&#x4F60;&#x5B9A;&#x4E49;&#x4E00;&#x4E9B; interface&#xFF0C;&#x914D;&#x5408; React.FC &#x8FD9;&#x79CD;&#x5B98;&#x65B9;&#x5185;&#x7F6E;&#x7684;&#x7C7B;&#x578B;&#x4E5F;&#x5C31;&#x8DD1;&#x901A;&#x4E86;&#xFF0C;&#x6CA1;&#x4EC0;&#x4E48;&#x7279;&#x522B;&#x96BE;&#x7684;&#x70B9;&#x3002;</p>
<p>&#x4F46;&#x662F;&#x5982;&#x679C;&#x662F;&#x9020;&#x8F6E;&#x5B50;&#x5462;&#xFF1F;&#x5982;&#x679C;&#x4F60;&#x81EA;&#x5DF1;&#x5199;&#x4E86;&#x4E00;&#x4E2A;&#x5DE5;&#x5177;&#x5E93;&#xFF0C;&#x5E76;&#x4E14;&#x7C7B;&#x578B;&#x6BD4;&#x8F83;&#x590D;&#x6742;&#xFF0C;&#x4F60;&#x80FD;&#x4FDD;&#x8BC1;&#x63A8;&#x5BFC;&#x51FA;&#x6765;&#x5417;&#xFF1F;&#x4EA6;&#x6216;&#x8005;&#x5C31;&#x62FF; Vue3 &#x6765;&#x8BF4;&#xFF0C;ref &#x662F;&#x4E00;&#x4E2A;&#x5F88;&#x590D;&#x6742;&#x7684;&#x5D4C;&#x5957;&#x7C7B;&#x578B;&#xFF0C;</p>
<p>&#x5047;&#x5982;&#x6211;&#x4EEC;&#x8FD9;&#x6837;&#x5B9A;&#x4E49;&#x4E00;&#x4E2A;&#x503C;<code>const value = ref(ref(2))</code>&#xFF0C;&#x5BF9;&#x4E8E;&#x5D4C;&#x5957;&#x7684; ref&#xFF0C;Vue3 &#x4F1A;&#x505A;&#x4E00;&#x5C42;<code>&#x62C6;&#x5305;</code>&#xFF0C;&#x4E5F;&#x5C31;&#x662F;&#x8BF4;&#x5176;&#x5B9E;<code>ref.value</code>&#x4F1A;&#x662F; 2&#xFF0C;</p>
<p>&#x90A3;&#x4E48;&#x5B83;&#x662F;&#x5982;&#x4F55;&#x8BA9; ts &#x63D0;&#x793A;&#x51FA; value &#x7684;&#x7C7B;&#x578B;&#x662F; number &#x7684;&#x5462;&#xFF1F;</p>
<p>&#x5982;&#x679C;&#x4F60;&#x770B;&#x5230;&#x6E90;&#x7801;&#x91CC;&#x7684;&#x8FD9;&#x6BB5;&#x4EE3;&#x7801;&#xFF0C;&#x4F60;&#x53EA;&#x6709;&#x57FA;&#x7840;&#x7684;&#x8BDD;&#xFF0C;&#x4FDD;&#x8BC1;&#x61F5;&#x903C;&#x3002;</p>
<pre class="language-"><code>// Recursively unwraps nested value bindings.
export type UnwrapRef<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>T</span><span class="token punctuation">&gt;</span></span> = {
  cRef: T extends ComputedRef<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>infer</span> <span class="token attr-name">V</span><span class="token punctuation">&gt;</span></span> ? UnwrapRef<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>V</span><span class="token punctuation">&gt;</span></span> : T
  ref: T extends Ref<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>infer</span> <span class="token attr-name">V</span><span class="token punctuation">&gt;</span></span> ? UnwrapRef<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>V</span><span class="token punctuation">&gt;</span></span> : T
  array: T
  object: { [K in keyof T]: UnwrapRef<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>T[K]</span><span class="token punctuation">&gt;</span></span> }
}[T extends ComputedRef<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>any</span><span class="token punctuation">&gt;</span></span>
  ? &apos;cRef&apos;
  : T extends Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>any</span><span class="token punctuation">&gt;</span></span>
    ? &apos;array&apos;
    : T extends Ref | Function | CollectionTypes | BaseTypes
      ? &apos;ref&apos; // bail out on types that shouldn&apos;t be unwrapped
      : T extends object ? &apos;object&apos; : &apos;ref&apos;]
</code></pre><h3 id="&#x4E1A;&#x52A1;&#x5F00;&#x53D1;&#x4EBA;&#x5458;"><strong>&#x4E1A;&#x52A1;&#x5F00;&#x53D1;&#x4EBA;&#x5458;</strong></h3>
<p>&#x5982;&#x679C;&#x77ED;&#x671F;&#x5185;&#x4F60;&#x5BF9;&#x81EA;&#x5DF1;&#x7684;&#x8981;&#x6C42;&#x662F;&#x80FD;&#x4E0A;&#x624B;&#x4E1A;&#x52A1;&#xFF0C;&#x90A3;&#x4E48;&#x4F60;&#x7406;&#x89E3; TypeScript &#x57FA;&#x7840;&#x7684;<code>interface</code>&#x548C;<code>type</code>&#x7F16;&#x5199;&#x548C;&#x6CDB;&#x578B;&#x7684;&#x666E;&#x901A;&#x4F7F;&#x7528;&#xFF08;&#x53EF;&#x4EE5;&#x7406;&#x89E3;&#x4E3A;&#x7C7B;&#x578B;&#x7CFB;&#x7EDF;&#x91CC;&#x7684;&#x51FD;&#x6570;&#x4F20;&#x53C2;&#xFF09;&#x4E5F;&#x5DF2;&#x7ECF;&#x8DB3;&#x591F;&#x3002;</p>
<h3 id="&#x6846;&#x67B6;&#x5F00;&#x53D1;&#x4EBA;&#x5458;"><strong>&#x6846;&#x67B6;&#x5F00;&#x53D1;&#x4EBA;&#x5458;</strong></h3>
<p>&#x4F46;&#x662F;&#x957F;&#x671F;&#x6765;&#x770B;&#xFF0C;&#x5982;&#x679C;&#x4F60;&#x7684;&#x76EE;&#x7684;&#x662F;&#x80FD;&#x591F;&#x81EA;&#x5DF1;&#x7F16;&#x5199;&#x4E00;&#x4E9B;&#x7C7B;&#x578B;&#x5B8C;&#x5584;&#x7684;&#x5E93;&#x6216;&#x6846;&#x67B6;&#xFF0C;&#x6216;&#x8005;&#x8BF4;&#x4F60;&#x5728;&#x516C;&#x53F8;&#x626E;&#x6F14;<code>&#x524D;&#x7AEF;&#x67B6;&#x6784;&#x5E08;</code>&#x3001;<code>&#x8F6E;&#x5B50;&#x4E13;&#x5BB6;</code>&#x7B49;&#x7B49;&#x89D2;&#x8272;&#xFF0C;&#x7ECF;&#x5E38;&#x9700;&#x8981;&#x5199;&#x4E00;&#x4E9B;&#x504F;&#x5E95;&#x5C42;&#x7684;&#x5E93;&#x7ED9;&#x4F60;&#x7684;&#x5C0F;&#x4F19;&#x4F34;&#x4EEC;&#x4F7F;&#x7528;&#xFF0C;&#x90A3;&#x4E48;&#x4F60;&#x5FC5;&#x987B;&#x6DF1;&#x5165;&#x5B66;&#x4E60;&#xFF0C;&#x8FD9;&#x6837;&#x624D;&#x80FD;&#x505A;&#x5230;&#x7ED9;&#x4F60;&#x7684;&#x6846;&#x67B6;&#x4F7F;&#x7528;&#x7528;&#x6237;&#x5B8C;&#x7F8E;&#x7684;&#x7C7B;&#x578B;&#x4F53;&#x9A8C;&#x3002;</p>
<h3 id="&#x9762;&#x8BD5;&#x9898;"><strong>&#x9762;&#x8BD5;&#x9898;</strong></h3>
<p>TypeScript &#x76F8;&#x5173;&#x7684;&#x9762;&#x8BD5;&#x9898;&#x6211;&#x89C1;&#x5F97;&#x4E0D;&#x591A;&#xFF0C;&#x4E0D;&#x8FC7;<code>&#x529B;&#x6263;&#x4E2D;&#x56FD;</code>&#x7684;&#x9762;&#x8BD5;&#x9898;&#x7B97;&#x662F;&#x96BE;&#x5EA6;&#x504F;&#x9AD8;&#x7684;&#xFF0C;&#x5176;&#x4E2D;&#x6709;&#x4E00;&#x9053; TS &#x7684;&#x9762;&#x8BD5;&#x9898;&#xFF0C;&#x53EF;&#x4EE5;&#x8BF4;&#x662F;&#x5B9E;&#x7528;&#x6027;&#x548C;&#x96BE;&#x5EA6;&#x90FD;&#x6709;&#x6240;&#x517C;&#x987E;&#xFF0C;&#x7B80;&#x5355;&#x6765;&#x8BF4;&#x5C31;&#x662F;&#x89E3;&#x5305;&#x3002;</p>
<pre class="language-"><code>// &#x89E3;&#x5F00;&#x53C2;&#x6570;&#x548C;&#x8FD4;&#x56DE;&#x503C;&#x4E2D;&#x7684;Promise
asyncMethod<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>T,</span> <span class="token attr-name">U</span><span class="token punctuation">&gt;</span></span>(input: Promise<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>T</span><span class="token punctuation">&gt;</span></span>): Promise&lt;Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>U</span><span class="token punctuation">&gt;</span></span>&gt;
 &#x2193;
asyncMethod<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>T,</span> <span class="token attr-name">U</span><span class="token punctuation">&gt;</span></span>(input: T): Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>U</span><span class="token punctuation">&gt;</span></span> 

// &#x89E3;&#x5F00;&#x53C2;&#x6570;&#x4E2D;&#x7684;Action
syncMethod<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>T,</span> <span class="token attr-name">U</span><span class="token punctuation">&gt;</span></span>(action: Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>T</span><span class="token punctuation">&gt;</span></span>): Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>U</span><span class="token punctuation">&gt;</span></span>
 &#x2193;
syncMethod<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>T,</span> <span class="token attr-name">U</span><span class="token punctuation">&gt;</span></span>(action: T): Action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>U</span><span class="token punctuation">&gt;</span></span>
</code></pre><p>&#x6211;&#x5728;&#x9AD8;&#x5F3A;&#x5EA6;&#x5B66;&#x4E60;&#x4E86;&#x4E24;&#x4E09;&#x4E2A;&#x6708; TS &#x7684;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x5DF2;&#x7ECF;&#x80FD;&#x628A;&#x8FD9;&#x9053;&#x9898;&#x76EE;&#x76F8;&#x5BF9;&#x8F7B;&#x677E;&#x7684;&#x89E3;&#x51FA;&#x6765;&#xFF0C;&#x76F8;&#x4FE1;&#x8FD9;&#x4E5F;&#x662F;&#x8BF4;&#x660E;&#x6211;&#x7684;&#x5B66;&#x4E60;&#x8DEF;&#x7EBF;&#x6CA1;&#x6709;&#x8D70;&#x504F;&#xFF08;&#x9898;&#x89E3;&#x5C31;&#x4E0D;&#x653E;&#x4E86;&#xFF0C;&#x5C0A;&#x91CD;&#x9762;&#x8BD5;&#x9898;&#xFF0C;&#x5176;&#x5B9E;&#x5C31;&#x662F;&#x8003;&#x5BDF;&#x4E86;<code>&#x6620;&#x5C04;&#x7C7B;&#x578B;</code>&#x548C;<code>infer</code>&#x7684;&#x4F7F;&#x7528;&#xFF09;&#x3002;<br><strong><a href="https://github.com/LeetCode-OpenSource/hire/blob/master/typescript_zh.md" target="_blank">&#x529B;&#x6263;&#x9762;&#x8BD5;&#x9898;</a></strong></p>
<h2 id="&#x4EE3;&#x7801;&#x8D28;&#x91CF;"><strong>&#x4EE3;&#x7801;&#x8D28;&#x91CF;</strong></h2>
<h3 id="&#x4EE3;&#x7801;&#x98CE;&#x683C;"><strong>&#x4EE3;&#x7801;&#x98CE;&#x683C;</strong></h3>
<ol>
<li><p>&#x5728;&#x9879;&#x76EE;&#x4E2D;&#x96C6;&#x6210; Prettier + ESLint + Airbnb Style Guide <strong><a href="https://blog.echobind.com/integrating-prettier-eslint-airbnb-style-guide-in-vscode-47f07b5d7d6a" target="_blank">integrating-prettier-eslint-airbnb-style-guide-in-vscode</a></strong>  </p>
</li>
<li><p><strong><a href="https://levelup.gitconnected.com/setting-up-eslint-with-prettier-typescript-and-visual-studio-code-d113bbec9857" target="_blank">&#x5728;&#x9879;&#x76EE;&#x4E2D;&#x96C6;&#x6210; ESLint with Prettier, TypeScript</a></strong>  </p>
</li>
</ol>
<h3 id="&#x9AD8;&#x8D28;&#x91CF;&#x67B6;&#x6784;"><strong>&#x9AD8;&#x8D28;&#x91CF;&#x67B6;&#x6784;</strong></h3>
<ol>
<li>&#x5982;&#x4F55;&#x91CD;&#x6784;&#x4E00;&#x4E2A;&#x8FC7;&#x4E07; Star &#x5F00;&#x6E90;&#x9879;&#x2014;BetterScroll&#xFF0C;&#x662F;&#x7531;&#x6EF4;&#x6EF4;&#x7684;&#x5927;&#x4F6C;<strong><a href="https://github.com/theniceangel" target="_blank">&#x5D47;&#x667A;</a></strong>&#x6240;&#x5E26;&#x6765;&#x7684;&#xFF0C;&#x65E0;&#x72EC;&#x6709;&#x5076;&#x7684;&#x662F;&#xFF0C;&#x8FD9;&#x7BC7;&#x6587;&#x7AE0;&#x9664;&#x4E86;&#x8BE6;&#x7EC6;&#x7684;&#x4ECB;&#x7ECD;&#x4E00;&#x4E2A;&#x5408;&#x683C;&#x7684;&#x5F00;&#x6E90;&#x9879;&#x76EE;&#x5E94;&#x8BE5;&#x505A;&#x5230;&#x7684;&#x4EE3;&#x7801;&#x8D28;&#x91CF;&#x4FDD;&#x8BC1;&#xFF0C;&#x6D4B;&#x8BD5;&#x6D41;&#x7A0B;&#xFF0C;&#x6301;&#x7EED;&#x96C6;&#x6210;&#x6D41;&#x7A0B;&#x4EE5;&#x5916;&#xFF0C;&#x4E5F;&#x4F53;&#x73B0;&#x4E86;&#x4ED6;&#x7684;&#x4E00;&#x4E9B;&#x601D;&#x8003;&#x6DF1;&#x5EA6;&#xFF0C;&#x975E;&#x5E38;&#x503C;&#x5F97;&#x5B66;&#x4E60;&#x3002;<br><strong><a href="https://juejin.im/post/5e40f72df265da5732551bdf" target="_blank">&#x5982;&#x4F55;&#x91CD;&#x6784;&#x4E00;&#x4E2A;&#x8FC7;&#x4E07; Star &#x5F00;&#x6E90;&#x9879;&#x76EE;&#x2014;BetterScroll</a></strong></li>
</ol>
<h3 id="git-&#x63D0;&#x4EA4;&#x4FE1;&#x606F;"><strong>Git &#x63D0;&#x4EA4;&#x4FE1;&#x606F;</strong></h3>
<ol>
<li>&#x5F88;&#x591A;&#x65B0;&#x624B;&#x5728;&#x63D0;&#x4EA4; Git &#x4FE1;&#x606F;&#x7684;&#x65F6;&#x5019;&#x4F1A;&#x5199;&#x7684;&#x5F88;&#x968F;&#x610F;&#xFF0C;&#x6BD4;&#x5982;<code>fix</code>&#x3001;<code>test</code>&#x3001;<code>&#x4FEE;&#x590D;</code>&#xFF0C;&#x8FD9;&#x4E48;&#x7CCA;&#x5F04;&#x7684;&#x8BDD;&#x662F;&#x4F1A;&#x88AB; leader &#x63CD;&#x7684;&#xFF01;<br><strong><a href="https://jiongks.name/blog/git-commit" target="_blank">[&#x8BD1;] &#x5982;&#x4F55;&#x64B0;&#x5199; Git &#x63D0;&#x4EA4;&#x4FE1;&#x606F;</a></strong><br><strong><a href="https://www.jianshu.com/p/c7e40dab5b05" target="_blank">Git-Commit-Log &#x89C4;&#x8303;&#xFF08;Angular &#x89C4;&#x8303;&#xFF09;</a></strong><br><strong><a href="https://www.npmjs.com/package/commitizen" target="_blank">commitizen</a></strong> &#x89C4;&#x8303;&#x6D41;&#x7A0B;&#x7684; commit &#x5DE5;&#x5177;&#xFF0C;&#x89C4;&#x8303;&#x7684; commit &#x683C;&#x5F0F;&#x4E5F;&#x4F1A;&#x8BA9;&#x5DE5;&#x5177;&#x5E2E;&#x4F60;&#x751F;&#x6210;&#x53CB;&#x597D;&#x7684;<code>changelog</code>  </li>
</ol>
<h2 id="&#x6784;&#x5EFA;&#x5DE5;&#x5177;"><strong>&#x6784;&#x5EFA;&#x5DE5;&#x5177;</strong></h2>
<ol>
<li>webpack &#x57FA;&#x7840;&#x548C;&#x4F18;&#x5316;<br><strong><a href="http://www.xbhub.com/wiki/webpack/" target="_blank">&#x6DF1;&#x5165;&#x6D45;&#x51FA; webpack</a></strong></li>
<li>&#x6EF4;&#x6EF4;&#x524D;&#x7AEF;&#x5DE5;&#x7A0B;&#x5E08;&#x7684; webpack &#x6DF1;&#x5165;&#x6E90;&#x7801;&#x5206;&#x6790;&#x7CFB;&#x5217;&#xFF0C;&#x975E;&#x5E38;&#x7684;&#x4F18;&#x79C0;&#x3002;<br><strong><a href="https://github.com/DDFE/DDFE-blog/issues/36" target="_blank">webpack &#x7CFB;&#x5217;&#x4E4B;&#x4E00;&#x603B;&#x89C8;</a></strong></li>
</ol>
<h2 id="&#x6027;&#x80FD;&#x4F18;&#x5316;"><strong>&#x6027;&#x80FD;&#x4F18;&#x5316;</strong></h2>
<ol>
<li><p>&#x63A8;&#x8350;&#x4FEE;&#x8A00;&#x5927;&#x4F6C;&#x7684;&#x4E00;&#x672C;&#x5C0F;&#x518C;&#xFF0C;&#x771F;&#x7684;&#x662F;&#x8BB2;&#x7684;&#x5F88;&#x597D;&#x5F88;&#x597D;&#x4E86;&#xFF0C;&#x4ECE;<code>webpack</code>&#x5230;<code>&#x7F51;&#x7EDC;</code>&#x5230;<code>dom&#x64CD;&#x4F5C;</code>&#xFF0C;&#x5168;&#x65B9;&#x4F4D;&#x7684;&#x5E26;&#x4F60;&#x505A;&#x4E00;&#x4E9B;&#x6027;&#x80FD;&#x4F18;&#x5316;&#x5B9E;&#x6218;&#x3002;&#x8FD9;&#x672C;&#x5C0F;&#x518C;&#x6211;&#x5F53;&#x65F6;&#x770B;&#x7684;&#x65F6;&#x5019;&#x771F;&#x7684;&#x662F;&#x5B8C;&#x5168;&#x505C;&#x4E0D;&#x4E0B;&#x6765;&#xFF0C;&#x4FEE;&#x8A00;&#x5927;&#x4F6C;&#x7684;&#x98CE;&#x683C;&#x65E2;&#x8F7B;&#x677E;&#x53C8;&#x5E7D;&#x9ED8;&#x3002;&#x4F46;&#x662F;&#x8BB2;&#x89E3;&#x7684;&#x4E1C;&#x897F;&#x5374;&#x80FD;&#x8BA9;&#x4F60;&#x53D7;&#x76CA;&#x532A;&#x6D45;&#x3002;</p>
</li>
<li><p>&#x8C37;&#x6B4C;&#x5F00;&#x53D1;&#x8005;&#x6027;&#x80FD;&#x4F18;&#x5316;&#x7AE0;&#x8282;&#xFF0C;&#x4E0D;&#x7528;&#x591A;&#x8BF4;&#x4E86;&#x5427;&#xFF1F;&#x5F88;&#x6743;&#x5A01;&#x4E86;&#x3002;&#x5DE6;&#x4FA7;&#x83DC;&#x5355;&#x680F;&#x91CC;&#x8FD8;&#x6709;&#x66F4;&#x591A;&#x76F8;&#x5173;&#x5185;&#x5BB9;&#xFF0C;&#x53EF;&#x4EE5;&#x6309;&#x9700;&#x9009;&#x62E9;&#x5B66;&#x4E60;&#x3002;<br><strong><a href="https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics" target="_blank">user-centric-performance-metrics</a></strong>  </p>
</li>
<li><p>&#x8BE6;&#x8C08;&#x5408;&#x6210;&#x5C42;&#xFF0C;&#x5408;&#x6210;&#x5C42;&#x8FD9;&#x4E2A;&#x4E1C;&#x897F;&#x79BB;&#x6211;&#x4EEC;&#x5FFD;&#x8FDC;&#x5FFD;&#x8FD1;&#xFF0C;&#x53EF;&#x80FD;&#x4F60;&#x7684;&#x4E00;&#x4E2A;&#x4E0D;&#x5C0F;&#x5FC3;&#x7684;&#x64CD;&#x4F5C;&#x5C31;&#x9020;&#x6210;<code>&#x5C42;&#x7206;&#x70B8;</code>&#xFF0C;&#x5F53;&#x7136;&#x9700;&#x8981;&#x4ED4;&#x7EC6;&#x5173;&#x6CE8;&#x5566;&#x3002;&#x8D77;&#x7801;&#xFF0C;&#x5728;&#x6027;&#x80FD;&#x9047;&#x5230;&#x74F6;&#x9888;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x4F60;&#x53EF;&#x4EE5;&#x6253;&#x5F00; chrome &#x7684;<code>layer</code>&#x9762;&#x677F;&#xFF0C;&#x770B;&#x770B;&#x4F60;&#x7684;&#x9875;&#x9762;&#x5230;&#x5E95;&#x662F;&#x600E;&#x4E48;&#x6837;&#x7684;&#x4E00;&#x4E2A;&#x5C42;&#x5206;&#x5E03;&#x3002;<br><strong><a href="https://juejin.im/entry/59dc9aedf265da43200232f9" target="_blank">&#x8BE6;&#x8C08;&#x5C42;&#x5408;&#x6210;&#xFF08;composite&#xFF09;</a></strong>  </p>
</li>
<li><p>&#x5218;&#x535A;&#x6587;&#x5927;&#x4F6C;&#x7684;&#x6027;&#x80FD;&#x4F18;&#x5316;&#x6307;&#x5357;&#xFF0C;&#x975E;&#x5E38;&#x6E05;&#x6670;&#x7684;&#x8BB2;&#x89E3;&#x4E86;&#x7F51;&#x9875;&#x4F18;&#x5316;&#x7684;&#x51E0;&#x4E2A;&#x91CD;&#x8981;&#x7684;&#x6CE8;&#x610F;&#x70B9;&#x3002;<br><strong><a href="https://zhuanlan.zhihu.com/p/66398148" target="_blank">&#x8BA9;&#x4F60;&#x7684;&#x7F51;&#x9875;&#x66F4;&#x4E1D;&#x6ED1;</a></strong>  </p>
</li>
</ol>
<h2 id="&#x793E;&#x533A;&#x8BA8;&#x8BBA;"><strong>&#x793E;&#x533A;&#x8BA8;&#x8BBA;</strong></h2>
<p>&#x4F5C;&#x4E3A;&#x4E00;&#x4E2A;&#x5408;&#x683C;&#x7684;&#x524D;&#x7AEF;&#x5DE5;&#x7A0B;&#x5E08;&#xFF0C;&#x4E00;&#x5B9A;&#x8981;&#x79EF;&#x6781;&#x7684;&#x6DF1;&#x5165;&#x793E;&#x533A;&#x53BB;&#x4E86;&#x89E3;&#x6700;&#x65B0;&#x7684;&#x52A8;&#x5411;&#xFF0C;&#x6BD4;&#x5982;&#x5728;<code>twitter</code>&#x4E0A;&#x5173;&#x6CE8;&#x4F60;&#x559C;&#x6B22;&#x7684;&#x6280;&#x672F;&#x5F00;&#x53D1;&#x4EBA;&#x5458;&#xFF0C;&#x5982; Dan&#x3001;&#x5C24;&#x96E8;&#x6EAA;&#x3002;</p>
<p>&#x53E6;&#x5916; Github &#x4E0A;&#x7684;&#x5F88;&#x591A; issue &#x4E5F;&#x662F;&#x5B9D;&#x85CF;&#x8BA8;&#x8BBA;&#xFF0C;&#x6211;&#x5C31;&#x4EE5;&#x6700;&#x8FD1;&#x6211;&#x5BF9;&#x4E8E; Vue3 &#x7684;&#x5B66;&#x4E60;&#x7B80;&#x5355;&#x7684;&#x4E3E;&#x51E0;&#x4E2A;&#x4F8B;&#x5B50;&#x3002;</p>
<h3 id="&#x4E3A;&#x4EC0;&#x4E48;-vue3-&#x4E0D;&#x9700;&#x8981;&#x65F6;&#x95F4;&#x5207;&#x7247;&#xFF1F;"><strong>&#x4E3A;&#x4EC0;&#x4E48; Vue3 &#x4E0D;&#x9700;&#x8981;&#x65F6;&#x95F4;&#x5207;&#x7247;&#xFF1F;</strong></h3>
<p>&#x5C24;&#x96E8;&#x6EAA;&#x89E3;&#x91CA;&#x5173;&#x4E8E;&#x4E3A;&#x4EC0;&#x4E48;&#x5728; Vue3 &#x4E2D;&#x4E0D;&#x52A0;&#x5165; React &#x65F6;&#x95F4;&#x5207;&#x7247;&#x529F;&#x80FD;&#xFF1F;&#x5E76;&#x4E14;&#x8BE6;&#x7EC6;&#x7684;&#x5206;&#x6790;&#x4E86; React &#x548C; Vue3 &#x4E4B;&#x95F4;&#x7684;&#x4E00;&#x4E9B;&#x7EC6;&#x8282;&#x5DEE;&#x522B;&#xFF0C;&#x72E0;&#x72E0;&#x7684;&#x5439;&#x4E86;&#x4E00;&#x6CE2; Vue3&#xFF08;&#x7231;&#x4E86;&#x7231;&#x4E86;&#xFF09;&#x3002;<br><strong><a href="https://github.com/vuejs/rfcs/issues/89" target="_blank">Why remove time slicing from vue3?</a></strong></p>
<h3 id="vue3-&#x7684;composition-api&#x5230;&#x5E95;&#x597D;&#x5728;&#x54EA;&#xFF1F;"><strong>Vue3 &#x7684;<code>composition-api</code>&#x5230;&#x5E95;&#x597D;&#x5728;&#x54EA;&#xFF1F;</strong></h3>
<p>Vue3 &#x7684; functional-api &#x76F8;&#x5173;&#x7684; rfc&#xFF0C;&#x5C24;&#x5927;&#x820C;&#x6218;&#x7FA4;&#x5112;&#xFF0C;&#x6DF1;&#x5165;&#x6D45;&#x51FA;&#x7684;&#x4E3A;&#x5927;&#x5BB6;&#x8BB2;&#x89E3;&#x4E86; Vue3 &#x7684;&#x8BBE;&#x8BA1;&#x601D;&#x8DEF;&#x7B49;&#x7B49;&#x3002;<br><strong><a href="https://github.com/vuejs/rfcs/issues/63" target="_blank">Amendment proposal to Function-based Component API</a></strong></p>
<h3 id="vue3composition-api&#x7684;&#x7B2C;&#x4E00;&#x624B;&#x6587;&#x6863;"><strong>Vue3<code>composition-api</code>&#x7684;&#x7B2C;&#x4E00;&#x624B;&#x6587;&#x6863;</strong></h3>
<p>vue-composition-api &#x7684; rfc &#x6587;&#x6863;&#xFF0C;&#x5728;&#x56FD;&#x5185;&#x8D44;&#x6599;&#x8FD8;&#x4E0D;&#x9F50;&#x5168;&#x7684;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x6211;&#x53BB;&#x9605;&#x8BFB;&#x4E86;<br><strong><a href="https://vue-composition-api-rfc.netlify.com/#summary" target="_blank">vue-composition-api-rfc</a></strong> &#x82F1;&#x6587;&#x7248;&#x6587;&#x6863;&#xFF0C;&#x5BF9;&#x4E8E;&#x91CC;&#x9762;&#x7684;&#x8BBE;&#x8BA1;&#x601D;&#x8DEF;&#x53F9;&#x4E3A;&#x89C2;&#x6B62;&#xFF0C;&#x5B66;&#x5230;&#x4E86;&#x975E;&#x5E38;&#x975E;&#x5E38;&#x591A;&#x5C24;&#x5927;&#x7684;&#x601D;&#x60F3;&#x3002;</p>
<p>&#x603B;&#x4E4B;&#xFF0C;&#x5BF9;&#x4E8E;&#x4F60;&#x559C;&#x6B22;&#x7684;&#x4ED3;&#x5E93;&#xFF0C;&#x90FD;&#x53EF;&#x4EE5;&#x53BB;&#x770B;&#x770B;&#x5B83;&#x7684; issue &#x6709;&#x6CA1;&#x6709;&#x770B;&#x8D77;&#x6765;&#x611F;&#x5174;&#x8DA3;&#x7684;&#x8BA8;&#x8BBA;&#xFF0C;&#x4F60;&#x4E5F;&#x4F1A;&#x5B66;&#x5230;&#x975E;&#x5E38;&#x591A;&#x7684;&#x4E1C;&#x897F;&#x3002;&#x5E76;&#x4E14;&#x4F60;&#x53EF;&#x4EE5;&#x548C;&#x4F5C;&#x8005;&#x4FDD;&#x6301;&#x601D;&#x8DEF;&#x4E0A;&#x7684;&#x540C;&#x6B65;&#xFF0C;&#x8FD9;&#x662F;&#x975E;&#x5E38;&#x96BE;&#x5F97;&#x7684;&#x4E00;&#x4EF6;&#x4E8B;&#x60C5;&#x3002;</p>
<h3 id="&#x5173;&#x4E8E;-hook-&#x7684;&#x4E00;&#x4E9B;&#x6536;&#x83B7;"><strong>&#x5173;&#x4E8E; Hook &#x7684;&#x4E00;&#x4E9B;&#x6536;&#x83B7;</strong></h3>
<p>&#x6211;&#x5728;&#x72E0;&#x72E0;&#x7684;&#x5438;&#x6536;&#x4E86;&#x4E00;&#x6CE2;&#x5C24;&#x5927;&#x5BF9;&#x4E8E; Vue3 <code>composition-api</code>&#x7684;&#x8BBE;&#x8BA1;&#x601D;&#x8DEF;&#x7684;&#x8BB2;&#x89E3;&#xFF0C;&#x65B0;&#x65E7;&#x6A21;&#x5F0F;&#x7684;&#x5BF9;&#x6BD4;&#x4EE5;&#x540E;&#xFF0C;&#x8FD9;&#x7BC7;&#x6587;&#x7AE0;&#x5C31;&#x662F;&#x6211;&#x5BF9; Vue3 &#x65B0;&#x6A21;&#x5F0F;&#x7684;&#x4E00;&#x4E9B;&#x89C1;&#x89E3;&#x3002;<br><strong><a href="https://juejin.im/post/5e0da5606fb9a048483ecf64" target="_blank">Vue3 Composition-Api + TypeScript + &#x65B0;&#x578B;&#x72B6;&#x6001;&#x7BA1;&#x7406;&#x6A21;&#x5F0F;&#x63A2;&#x7D22;&#x3002;</a></strong></p>
<p>&#x5728; Vue2 &#x91CC;&#xFF0C;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;<code>plugin</code>&#x5148;&#x4F53;&#x9A8C;<code>composition-api</code>&#xFF0C;&#x622A;&#x53D6;&#x8FD9;&#x7BC7;&#x6587;&#x7AE0;&#x5BF9;&#x5E94;&#x7684;&#x5B9E;&#x6218;&#x9879;&#x76EE;&#x4E2D;&#x7684;&#x4E00;&#x5C0F;&#x90E8;&#x5206;&#x4EE3;&#x7801;&#x5427;&#xFF1A;</p>
<pre class="language-"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Books</span> <span class="token attr-name">:books</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>booksAvaluable<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:loading</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>loading<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
import { createComponent } from &apos;@vue/composition-api&apos;;
import Books from &apos;@/components/Books.vue&apos;;
import { useAsync } from &apos;@/hooks&apos;;
import { getBooks } from &apos;@/hacks/fetch&apos;;
import { useBookListInject } from &apos;@/context&apos;;
export default createComponent({
  name: &apos;books&apos;,
  setup() {
    const { books, setBooks, booksAvaluable } = useBookListInject();
    const loading = useAsync(async () =&gt; {
      const requestBooks = await getBooks();
      setBooks(requestBooks);
    });
    return { booksAvaluable, loading };
  },
  components: {
    Books,
  },
});
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.content</span> <span class="token punctuation">{</span>
  <span class="token property">max-width</span><span class="token punctuation">:</span> 700px<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre><p>&#x672C;&#x5B9E;&#x6218;&#x5BF9;&#x5E94;&#x4ED3;&#x5E93;&#xFF1A;</p>
<p><strong><a href="https://github.com/sl1673495/vue-bookshelf" target="_blank">vue-bookshelf</a></strong></p>
<p>&#x5E76;&#x4E14;&#x7531;&#x4E8E;&#x5B83;&#x548C;<code>React Hook</code>&#x5728;&#x5F88;&#x591A;&#x65B9;&#x9762;&#x7684;&#x601D;&#x60F3;&#x4E5F;&#x975E;&#x5E38;&#x76F8;&#x8FD1;&#xFF0C;&#x8FD9;&#x751A;&#x81F3;&#x5BF9;&#x4E8E;&#x6211;&#x5728;<code>React Hook</code>&#x4E0A;&#x7684;&#x4F7F;&#x7528;&#x4E5F;&#x5927;&#x6709;&#x88E8;&#x76CA;&#xFF0C;&#x6BD4;&#x5982;&#x4EE3;&#x7801;&#x7EC4;&#x7EC7;&#x7684;&#x601D;&#x8DEF;&#x4E0A;&#xFF0C;</p>
<p>&#x5728;&#x7B2C;&#x4E00;&#x6B21;&#x4F7F;&#x7528;<code>Hook</code>&#x5F00;&#x53D1;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x5927;&#x90E8;&#x5206;&#x4EBA;&#x53EF;&#x80FD;&#x8FD8;&#x662F;&#x4F1A;&#x4FDD;&#x7559;&#x7740;&#x4EE5;&#x524D;&#x7684;&#x601D;&#x60F3;&#xFF0C;&#x628A;<code>state</code>&#x96C6;&#x4E2D;&#x8D77;&#x6765;&#x5B9A;&#x4E49;&#x5728;&#x4EE3;&#x7801;&#x7684;&#x524D;&#x4E00;&#x5927;&#x6BB5;&#xFF0C;&#x628A;<code>computed</code>&#x96C6;&#x4E2D;&#x5B9A;&#x4E49;&#x5728;&#x7B2C;&#x4E8C;&#x6BB5;&#xFF0C;&#x628A;<code>mutation</code>&#x5B9A;&#x4E49;&#x5728;&#x7B2C;&#x4E09;&#x6BB5;&#xFF0C;&#x5982;&#x679C;&#x4E0D;&#x770B;&#x5C24;&#x5927;&#x5BF9;&#x4E8E;&#x8BBE;&#x8BA1;&#x601D;&#x60F3;&#x7684;&#x8BB2;&#x89E3;&#xFF0C;&#x6211;&#x4E5F;&#x4E00;&#x76F4;&#x662F;&#x5728;&#x8FD9;&#x6837;&#x505A;&#x3002;</p>
<p>&#x4F46;&#x662F;&#x4E3A;&#x4EC0;&#x4E48; Logical Concerns &#x4F18;&#x4E8E; Vue2 &#x548C; React Class Component &#x7684; Option Types&#xFF1F;&#x770B;&#x5B8C; <strong><a href="https://vue-composition-api-rfc.netlify.com/#detailed-design" target="_blank">detailed-design</a></strong> &#x8FD9;&#x4E2A;&#x7AE0;&#x8282;&#x4F60;&#x5C31;&#x5168;&#x90E8;&#x660E;&#x767D;&#x4E86;&#xFF0C;&#x5E76;&#x4E14;&#x8FD9;&#x4F1A;&#x878D;&#x5165;&#x5230;&#x4F60;&#x65E5;&#x5E38;&#x5F00;&#x53D1;&#x4E2D;&#x53BB;&#x3002;</p>
<p>&#x603B;&#x4E4B;&#xFF0C;&#x770B;&#x5B8C;&#x8FD9;&#x7BC7;&#x4EE5;&#x540E;&#xFF0C;&#x6211;&#x679C;&#x65AD;&#x7684;&#x628A;&#x516C;&#x53F8;&#x91CC;&#x7684;&#x9996;&#x5C4F;&#x7EC4;&#x4EF6;&#x7684;&#x4E00;&#x5768;&#x4EE3;&#x7801;&#x76F4;&#x63A5;&#x62BD;&#x6210;&#x4E86; n &#x4E2A;&#x81EA;&#x5B9A;&#x4E49; hook&#xFF0C;&#x7EF4;&#x62A4;&#x6548;&#x7387;&#x63D0;&#x5347;&#x7B80;&#x76F4;&#x50CF;&#x662F;&#x5750;&#x706B;&#x7BAD;&#x3002;</p>
<p>&#x5F53;&#x7136;&#xFF0C;&#x793E;&#x533A;&#x91CC;&#x7684;&#x5B9D;&#x85CF; issue &#x80AF;&#x5B9A;&#x4E0D;&#x6B62;&#x8FD9;&#x4E9B;&#xFF0C;&#x6211;&#x53EA;&#x662F;&#x7B80;&#x5355;&#x7684;&#x5217;&#x51FA;&#x4E86;&#x51E0;&#x4E2A;&#xFF0C;&#x4F46;&#x5C31;&#x662F;&#x8FD9;&#x51E0;&#x4E2A;&#x90FD;&#x8BA9;&#x6211;&#x7684;&#x6280;&#x672F;&#x89C6;&#x91CE;&#x5F00;&#x9614;&#x4E86;&#x5F88;&#x591A;&#xFF0C;&#x5E76;&#x4E14;&#x662F;&#x771F;&#x6B63;&#x7684;&#x878D;&#x5165;&#x5230;&#x516C;&#x53F8;&#x7684;&#x4E1A;&#x52A1;&#x5B9E;&#x6218;&#x4E2D;&#x53BB;&#xFF0C;&#x662F;<code>&#x5177;&#x6709;&#x4E1A;&#x52A1;&#x4EF7;&#x503C;</code>&#x7684;&#x3002;&#x5E0C;&#x671B;&#x4F60;&#x517B;&#x6210;&#x770B; issue&#xFF0C;&#x7D27;&#x8DDF;&#x82F1;&#x6587;&#x793E;&#x533A;&#x7684;&#x4E60;&#x60EF;&#xFF0C;Github issue &#x91CC;&#x5355;&#x7EAF;&#x7684;&#x6280;&#x672F;&#x63A2;&#x8BA8;&#x6C1B;&#x56F4;&#xFF0C;&#x771F;&#x7684;&#x662F;&#x56FD;&#x5185;&#x5F88;&#x5C11;&#x6709;&#x793E;&#x533A;&#x53EF;&#x4EE5;&#x5AB2;&#x7F8E;&#x7684;&#x3002;</p>
<pre class="language-"><code>function AppInner({ children }) {
  const [menus, setMenus] = useState({});

  // &#x7528;&#x6237;&#x4FE1;&#x606F;
  const user = useUser();

  // &#x4E3B;&#x9898;&#x80FD;&#x529B;
  useTheme();

  // &#x6743;&#x9650;&#x83B7;&#x53D6;
  useAuth({
    setMenus,
  });

  // &#x52A8;&#x6001;&#x83DC;&#x5355;&#x4E5F;&#x9700;&#x8981;&#x7528;&#x5230;&#x83DC;&#x5355;&#x7684;&#x80FD;&#x529B;
  useDynamicMenus({
    menus,
    setMenus,
  });

  return (
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Context.Provider</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span>{user}</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Layout</span> <span class="token attr-name">routers</span><span class="token attr-value"><span class="token punctuation">=</span>{backgrounds}</span><span class="token punctuation">&gt;</span></span>
        {children}
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Layout</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Context.Provider</span><span class="token punctuation">&gt;</span></span>
  );
}
</code></pre><p>&#x53EF;&#x4EE5;&#x770B;&#x5230;&#xFF0C;<code>Hook</code>&#x5728;&#x4EE3;&#x7801;&#x7EC4;&#x7EC7;&#x7684;&#x65B9;&#x9762;&#x6709;&#x7740;&#x5F97;&#x5929;&#x72EC;&#x539A;&#x7684;&#x4F18;&#x52BF;&#xFF0C;&#x751A;&#x81F3;&#x5404;&#x4E2A;<code>&#x6A21;&#x5757;</code>&#x4E4B;&#x95F4;&#x503C;&#x7684;&#x4F20;&#x9012;&#x90FD;&#x662F;&#x90A3;&#x4E48;&#x7684;&#x81EA;&#x7136;&#xFF0C;&#x4EC5;&#x4EC5;&#x662F;&#x51FD;&#x6570;&#x4F20;&#x53C2;&#x800C;&#x5DF2;&#x3002;<br>&#x603B;&#x4E4B;&#xFF0C;&#x793E;&#x533A;&#x63A8;&#x51FA;&#x4E00;&#x4E9B;&#x65B0;&#x7684;&#x4E1C;&#x897F;&#xFF0C;&#x5B83;&#x603B;&#x5F52;&#x662F;&#x89E3;&#x51B3;&#x4E86;&#x4E4B;&#x524D;&#x7684;&#x4E00;&#x4E9B;&#x75DB;&#x70B9;&#x3002;&#x6211;&#x4EEC;&#x8DDF;&#x7740;&#x5927;&#x4F6C;&#x7684;&#x601D;&#x8DEF;&#x8D70;&#xFF0C;&#x4E00;&#x5B9A;&#x6709;&#x8089;&#x5403;&#x3002;</p>
<h3 id="tree-shaking-&#x7684;-issue"><strong>Tree Shaking &#x7684; Issue</strong></h3>
<p>&#x76F8;&#x5B66;&#x957F;&#x7684;&#x6587;&#x7AE0;<strong><a href="https://zhuanlan.zhihu.com/p/32831172" target="_blank">&#x4F60;&#x7684; Tree-Shaking &#x5E76;&#x6CA1;&#x4EC0;&#x4E48;&#x5375;&#x7528;</a></strong>&#x4E2D;&#xFF0C;&#x4E5F;&#x8BE6;&#x7EC6;&#x7684;&#x63CF;&#x8FF0;&#x4E86;&#x4ED6;&#x5BF9;&#x4E8E;<code>&#x526F;&#x4F5C;&#x7528;</code>&#x7684;&#x4E00;&#x4E9B;&#x63A2;&#x5BFB;&#x8FC7;&#x7A0B;&#xFF0C;&#x5728; <strong><a href="https://github.com/mishoo/UglifyJS2/issues/1261" target="_blank">UglifyJS &#x7684; Issue</a></strong> &#x4E2D;&#x627E;&#x5230;&#x4E86;&#x6700;&#x7EC8;&#x7684;&#x7B54;&#x6848;&#xFF0C;&#x7136;&#x540E;&#x8D21;&#x732E;&#x7ED9;&#x4E2D;&#x6587;&#x793E;&#x533A;&#xFF0C;&#x8FD9;&#x4E9B;&#x5185;&#x5BB9;&#x6700;&#x5F00;&#x59CB;&#x4E0D;&#x4F1A;&#x5728;&#x4EFB;&#x4F55;&#x4E2D;&#x6587;&#x793E;&#x533A;&#x91CC;&#x51FA;&#x73B0;&#xFF0C;&#x53EA;&#x6709;&#x9760;&#x4F60;&#x53BB;&#x63A2;&#x5BFB;&#x548C;&#x53D1;&#x73B0;&#x3002;</p>
<h2 id="&#x5B66;&#x4E60;&#x65B9;&#x6CD5;&#x7684;&#x8F6C;&#x53D8;"><strong>&#x5B66;&#x4E60;&#x65B9;&#x6CD5;&#x7684;&#x8F6C;&#x53D8;</strong></h2>
<p>&#x4ECE;&#x521D;&#x4E2D;&#x7EA7;&#x524D;&#x7AEF;&#x5F00;&#x59CB;&#x5F80;&#x9AD8;&#x7EA7;&#x524D;&#x7AEF;&#x8FDB;&#x9636;&#xFF0C;&#x6709;&#x4E00;&#x4E2A;&#x5F88;&#x91CD;&#x8981;&#x7684;&#x70B9;&#xFF0C;&#x5C31;&#x662F;&#x5F88;&#x591A;&#x60C5;&#x51B5;&#x4E0B;&#x56FD;&#x5185;&#x793E;&#x533A;&#x80FD;&#x627E;&#x5230;&#x7684;&#x8D44;&#x6599;&#x5DF2;&#x7ECF;&#x4E0D;&#x591F;&#x7528;&#x4E86;&#xFF0C;&#x800C;&#x4E14;&#x6709;&#x5F88;&#x591A;&#x4F18;&#x8D28;&#x8D44;&#x6599;&#x4E5F;&#x662F;&#x4ECE;&#x56FD;&#x5916;&#x793E;&#x533A;&#x4E8C;&#x624B;&#x3001;&#x4E09;&#x624B;&#x7FFB;&#x8BD1;&#x8FC7;&#x6765;&#x7684;&#xFF0C;&#x7FFB;&#x8BD1;&#x8D28;&#x91CF;&#x4E5F;&#x4E0D;&#x80FD;&#x4FDD;&#x8BC1;&#x3002;</p>
<p>&#x8FD9;&#x5C31;&#x5F15;&#x7533;&#x51FA;&#x6211;&#x4EEC;&#x8FDB;&#x9636;&#x7684;&#x7B2C;&#x4E00;&#x4E2A;&#x70B9;&#xFF0C;<strong>&#x5F00;&#x59CB;&#x63A5;&#x53D7;&#x82F1;&#x6587;&#x8D44;&#x6599;</strong>&#x3002;</p>
<p>&#x8FD9;&#x91CC;&#x5F88;&#x591A;&#x540C;&#x5B66;&#x8BF4;&#xFF0C;&#x6211;&#x7684;&#x82F1;&#x6587;&#x80FD;&#x529B;&#x4E0D;&#x884C;&#x554A;&#xFF0C;&#x770B;&#x4E0D;&#x61C2;&#x3002;&#x5176;&#x5B9E;&#x6211;&#x60F3;&#x8BF4;&#xFF0C;&#x7B14;&#x8005;&#x7684;&#x82F1;&#x8BED;&#x80FD;&#x529B;&#x4E5F;&#x5F88;&#x4E00;&#x822C;&#xFF0C;&#x4ECE;&#x53BB;&#x5E74;&#x5F00;&#x59CB;&#x6211;&#x7ACB;&#x4E86;&#x4E2A;&#x76EE;&#x6807;&#xFF0C;&#x5C31;&#x662F;&#x5E26;&#x7740;&#x5212;&#x8BCD;&#x7FFB;&#x8BD1;&#x63D2;&#x4EF6;&#x4E5F;&#x8981;&#x5F00;&#x59CB;&#x8270;&#x96BE;&#x7684;&#x770B;&#x82F1;&#x6587;&#x6587;&#x7AE0;&#x548C;&#x8D44;&#x6599;&#xFF0C;&#x9047;&#x5230;&#x4E0D;&#x61C2;&#x7684;&#x5355;&#x8BCD;&#x5C31;&#x5212;&#x51FA;&#x6765;&#x770B;&#x4E24;&#x773C;&#xFF08;&#x6CA1;&#x6709;&#x523B;&#x610F;&#x53BB;&#x80CC;&#xFF09;&#xFF0C;&#x7B2C;&#x4E94;&#x516D;&#x6B21;&#x9047;&#x89C1;&#x8FD9;&#x4E2A;&#x5355;&#x8BCD;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x5C31;&#x5DEE;&#x4E0D;&#x591A;&#x8BB0;&#x5F97;&#x5B83;&#x662F;&#x4EC0;&#x4E48;&#x610F;&#x601D;&#x4E86;&#x3002;</p>
<p>&#x534A;&#x5E74;&#x5DE6;&#x53F3;&#x7684;&#x65F6;&#x95F4;&#x4E0B;&#x6765;&#xFF0C;&#xFF08;&#x5927;&#x6982;&#x4FDD;&#x6301;&#x6BCF;&#x5468; 3 &#x7BC7;&#x4EE5;&#x4E0A;&#x7684;&#x9605;&#x8BFB;&#x91CF;&#xFF09;&#x80FD;&#x8089;&#x773C;&#x53EF;&#x89C1;&#x7684;&#x611F;&#x89C9;&#x81EA;&#x5DF1;&#x7684;&#x82F1;&#x8BED;&#x80FD;&#x529B;&#x5728;&#x8FDB;&#x6B65;&#xFF0C;&#x5F88;&#x591A;&#x65F6;&#x5019;&#x4E0D;&#x7528;&#x5212;&#x8BCD;&#x7FFB;&#x8BD1;&#x63D2;&#x4EF6;&#xFF0C;&#x4E5F;&#x53EF;&#x4EE5;&#x5B8C;&#x6574;&#x7684;&#x9605;&#x8BFB;&#x4E0B;&#x6765;&#x4E00;&#x6BB5;&#x6587;&#x7AE0;&#x3002;</p>
<p>&#x8FD9;&#x91CC;&#x662F;&#x6211;&#x5F53;&#x65F6;&#x9605;&#x8BFB;&#x82F1;&#x6587;&#x4F18;&#x8D28;&#x6587;&#x7AE0;&#x7684;&#x4E00;&#x4E9B;&#x8BB0;&#x5F55;&#xFF0C;</p>
<p><strong><a href="https://github.com/sl1673495/blogs/issues/15" target="_blank">&#x82F1;&#x6587;&#x6280;&#x672F;&#x6587;&#x7AE0;&#x9605;&#x8BFB;</a></strong></p>
<p>&#x540E;&#x9762;&#x82F1;&#x6587;&#x9605;&#x8BFB;&#x6162;&#x6162;&#x6210;&#x4E86;&#x4E00;&#x4EF6;&#x6BD4;&#x8F83;&#x81EA;&#x7136;&#x7684;&#x4E8B;&#x60C5;&#xFF0C;&#x4E5F;&#x5C31;&#x6CA1;&#x6709;&#x518D;&#x523B;&#x610F;&#x53BB;&#x8BB0;&#x5F55;&#xFF0C;&#x524D;&#x671F;&#x53EF;&#x4EE5;&#x7528;&#x8FD9;&#x79CD;&#x65B9;&#x5F0F;&#x6FC0;&#x52B1;&#x81EA;&#x5DF1;&#x3002;</p>
<p>&#x63A8;&#x8350;&#x4E24;&#x4E2A;&#x82F1;&#x6587;&#x7AD9;&#x70B9;&#x5427;&#xFF0C;&#x6709;&#x5F88;&#x591A;&#x9AD8;&#x8D28;&#x91CF;&#x7684;&#x524D;&#x7AEF;&#x6587;&#x7AE0;&#x3002;</p>
<p><strong><a href="https://dev.to/t/javascript" target="_blank">dev.to</a></strong><br><strong><a href="https://medium.com/" target="_blank">medium</a></strong></p>
<p>medium &#x53EF;&#x80FD;&#x9700;&#x8981;&#x501F;&#x52A9;&#x4E00;&#x4E9B;&#x79D1;&#x5B66;&#x5DE5;&#x5177;&#x624D;&#x80FD;&#x67E5;&#x770B;&#xFF0C;&#x4F46;&#x662F;&#x91CC;&#x9762;&#x7684;&#x4F1A;&#x5458;&#x4ED8;&#x8D39;&#x4EE5;&#x53CA;&#x4F5C;&#x8005;&#x6FC0;&#x52B1;&#x673A;&#x5236;&#x4F7F;&#x5F97;&#x6587;&#x7AE0;&#x975E;&#x5E38;&#x7684;&#x4F18;&#x8D28;&#x3002;&#x767B;&#x5F55;&#x81EA;&#x5DF1;&#x7684;&#x8C37;&#x6B4C;&#x8D26;&#x53F7;&#x5373;&#x53EF;&#x6210;&#x4E3A;&#x4F1A;&#x5458;&#xFF0C;&#x524D;&#x671F;&#x53EF;&#x80FD;&#x9996;&#x9875;&#x4E0D;&#x4F1A;&#x63A8;&#x8350;&#x4E00;&#x4E9B;&#x524D;&#x7AEF;&#x76F8;&#x5173;&#x7684;&#x6587;&#x7AE0;&#xFF0C;&#x4F60;&#x53EF;&#x4EE5;&#x81EA;&#x5DF1;&#x53BB;&#x641C;&#x7D22;&#x5173;&#x952E;&#x5B57;&#x5982;<code>Vue</code>&#x3001;<code>React</code>&#x3001;<code>Webpack</code>&#xFF0C;&#x4EFB;&#x4F55;&#x4F60;&#x5174;&#x8DA3;&#x7684;&#x524D;&#x7AEF;&#x6280;&#x672F;&#x6808;&#xFF0C;&#x4E0D;&#x9700;&#x8981;&#x8FC7;&#x591A;&#x4E45;&#x4F60;&#x7684;&#x9996;&#x9875;&#x5C31;&#x4F1A;&#x51FA;&#x73B0;&#x524D;&#x7AEF;&#x7684;&#x63A8;&#x8350;&#x5185;&#x5BB9;&#x3002;&#x597D;&#x597D;&#x4EAB;&#x53D7;&#x8FD9;&#x4E2A;&#x9AD8;&#x8D28;&#x91CF;&#x7684;&#x82F1;&#x6587;&#x793E;&#x533A;&#x5427;&#x3002;</p>
<h2 id="&#x5173;&#x4E8E;&#x5B9E;&#x8DF5;"><strong>&#x5173;&#x4E8E;&#x5B9E;&#x8DF5;</strong></h2>
<p>&#x793E;&#x533A;&#x6709;&#x5F88;&#x591A;&#x5927;&#x4F6C;&#x5B9E;&#x529B;&#x5F88;&#x5F3A;&#xFF0C;&#x4F46;&#x662F;&#x5BF9;&#x65B0;&#x624B;&#x5199;&#x7684;&#x4EE3;&#x7801;&#x55E4;&#x4E4B;&#x4EE5;&#x9F3B;&#xFF0C;&#x8BA4;&#x4E3A;&#x6709; <code>any</code> &#x7684;&#x5C31;&#x4E0D;&#x53EB; <code>TypeScript</code>&#x3001;&#x8BA4;&#x4E3A;&#x6CA1;&#x6709;<code>&#x5355;&#x5143;&#x6D4B;&#x8BD5;</code>&#x5C31;&#x6CA1;&#x8D44;&#x683C;&#x4E22;&#x5230; Github &#x4E0A;&#x53BB;&#x3002;&#x8FD9;&#x79CD;&#x8A00;&#x8BBA;&#x5176;&#x5B9E;&#x4E5F;&#x4E0D;&#x602A;&#x4ED6;&#x4EEC;&#xFF0C;&#x4ED6;&#x4EEC;&#x4E5F;&#x53EA;&#x662F;&#x5BF9;&#x5F00;&#x6E90;&#x8F6F;&#x4EF6;&#x7684;&#x8981;&#x6C42;&#x9AD8;&#x5230;&#x504F;&#x6267;&#x800C;&#x5DF2;&#x3002;&#x4F46;&#x662F;&#x5BF9;&#x4E8E;&#x65B0;&#x624B;&#x5B66;&#x4E60;&#x6765;&#x8BF4;&#xFF0C;&#x8FD9;&#x79CD;&#x8A00;&#x8BBA;&#x5F88;&#x5BB9;&#x6613;&#x5BF9;&#x5927;&#x5BB6;&#x9020;&#x6210;&#x6253;&#x51FB;&#xFF0C;&#x5BFC;&#x81F4;&#x4E0D;&#x6562;&#x5199; ts&#xFF0C;&#x5199;&#x7684;&#x4E1C;&#x897F;&#x4E0D;&#x6562;&#x653E;&#x51FA;&#x6765;&#x3002;&#x5176;&#x5B9E;&#x5927;&#x53EF;&#x4E0D;&#x5FC5;&#xFF0C;<code>&#x5DE5;&#x4E1A;&#x805A;</code> &#x5BF9;&#x4E8E;&#x8FD9;&#x4E9B;&#x89C2;&#x70B9;&#x5C31;&#x53D1;&#x8868;&#x4E86;&#x4E00;&#x7BC7;&#x5F88;&#x597D;&#x7684;&#x770B;&#x6CD5;&#xFF0C;&#x8BA9;&#x6211;&#x89C9;&#x5F97;&#x6DF1;&#x53D7;&#x6253;&#x52A8;&#xFF0C;&#x4E5F;&#x5C31;&#x662F;&#x8FD9;&#x7BC7;&#x6587;&#x7AE0;&#x5F00;&#x59CB;&#xFF0C;&#x6211;&#x6162;&#x6162;&#x7684;&#x628A;&#x65E7;&#x9879;&#x76EE;&#x7528; ts &#x6539;&#x9020;&#x8D77;&#x6765;&#xFF0C;&#x6162;&#x6162;&#x7684;&#x8FDB;&#x6B65;&#x3002;</p>
<p><strong><a href="https://mp.weixin.qq.com/s?__biz=MzA4Njc2MTE3Ng==&amp;mid=2456151423&amp;idx=1&amp;sn=2fec2ff0606b865abaaaaea48ddfd167&amp;chksm=88528ec8bf2507de91cec62b4bad281fb8bf6d16c8a1ea04ea3fedb871099dfb7fda42082fff&amp;mpshare=1&amp;scene=1&amp;srcid=&amp;sharer_sharetime=1585884823115&amp;sharer_shareid=82384198865aad802052fa45394cd852#rd" target="_blank">Vue 3.0 &#x516C;&#x5F00;&#x4EE3;&#x7801;&#x4E4B;&#x540E;&#x2026;&#x2026;</a></strong></p>
<h2 id="&#x603B;&#x7ED3;"><strong>&#x603B;&#x7ED3;</strong></h2>
<p>&#x672C;&#x7BC7;&#x6587;&#x7AE0;&#x662F;&#x6211;&#x5728;&#x8FD9;&#x4E00;&#x5E74;&#x591A;&#x7684;&#x5B66;&#x4E60;&#x7ECF;&#x5386;&#x62BD;&#x8C61;&#x4E2D;&#x603B;&#x7ED3;&#x51FA;&#x6765;&#xFF0C;&#x8FD8;&#x6709;&#x5F88;&#x591A;&#x4E1C;&#x897F;&#x6211;&#x4F1A;&#x9646;&#x7EED;&#x52A0;&#x5165;&#x5230;&#x8FD9;&#x7BC7;&#x6587;&#x7AE0;&#x4E2D;&#x53BB;&#x3002;</p>
<p>&#x5E0C;&#x671B;&#x4F5C;&#x4E3A;&#x521D;&#x4E2D;&#x7EA7;&#x524D;&#x7AEF;&#x5DE5;&#x7A0B;&#x5E08;&#x7684;&#x4F60;&#xFF0C;&#x80FD;&#x591F;&#x6709;&#x6240;&#x6536;&#x83B7;&#x3002;&#x5982;&#x679C;&#x80FD;&#x591F;&#x5E2E;&#x52A9;&#x5230;&#x4F60;&#x5C31;&#x662F;&#x6211;&#x6700;&#x5927;&#x7684;&#x6EE1;&#x8DB3;&#x3002;</p>
<p>&#x672A;&#x5B8C;&#x5F85;&#x7EED;... &#x6301;&#x7EED;&#x66F4;&#x65B0;&#x4E2D;&#x3002;</p>
<h2 id="&#x2764;&#xFE0F;&#x611F;&#x8C22;&#x5927;&#x5BB6;"><strong>&#x2764;&#xFE0F;&#x611F;&#x8C22;&#x5927;&#x5BB6;</strong></h2>
<ol>
<li><p>&#x5982;&#x679C;&#x672C;&#x6587;&#x5BF9;&#x4F60;&#x6709;&#x5E2E;&#x52A9;&#xFF0C;&#x5C31;&#x70B9;&#x4E2A;&#x8D5E;&#x652F;&#x6301;&#x4E0B;&#x5427;&#xFF0C;&#x4F60;&#x7684;&#x300C;&#x8D5E;&#x300D;&#x662F;&#x6211;&#x521B;&#x4F5C;&#x7684;&#x52A8;&#x529B;&#x3002;</p>
</li>
<li><p>&#x5173;&#x6CE8;&#x516C;&#x4F17;&#x53F7;&#x300C;&#x524D;&#x7AEF;&#x4ECE;&#x8FDB;&#x9636;&#x5230;&#x5165;&#x9662;&#x300D;&#x5373;&#x53EF;&#x52A0;&#x6211;&#x597D;&#x53CB;&#xFF0C;&#x6211;&#x62C9;&#x4F60;&#x8FDB;&#x300C;&#x524D;&#x7AEF;&#x8FDB;&#x9636;&#x4EA4;&#x6D41;&#x7FA4;&#x300D;&#xFF0C;&#x5927;&#x5BB6;&#x4E00;&#x8D77;&#x5171;&#x540C;&#x4EA4;&#x6D41;&#x548C;&#x8FDB;&#x6B65;&#x3002;</p>
</li>
</ol>
<p>&#x8BB2;&#x7684;&#x597D;&#xFF0C;&#x6211;&#x4E5F;&#x662F;&#x611F;&#x89C9;&#x9047;&#x5230;&#x4E86;&#x74F6;&#x9888;&#xFF0C;&#x8981;&#x6709;&#x4E2A;&#x65B9;&#x5411;</p>
<p>&#x611F;&#x8C22;&#x603B;&#x7ED3;&#x4E0E;&#x5206;&#x4EAB;</p>
<p>&#x6839;&#x636E;&#x6211;&#x5728; vue2.6.11 &#x7248;&#x672C;&#x6E90;&#x7801;&#x7684;&#x89C2;&#x5BDF;&#x60C5;&#x51B5;&#xFF0C;nextTick &#x5728; 2.5 &#x7248;&#x672C;&#x4E4B;&#x540E;&#x5C31;&#x5DF2;&#x7ECF;&#x53D6;&#x6D88;&#x5B8F;&#x4EFB;&#x52A1;&#x7EDF;&#x4E00;&#x4F7F;&#x7528;&#x5FAE;&#x4EFB;&#x52A1;&#x4E86;&#x2026;</p>
<p>2.6.11 &#x6211;&#x6CA1;&#x770B;&#xFF0C;3.0 &#x6211;&#x770B;&#x4E86;&#x4E5F;&#x662F;&#x5168;&#x90E8;&#x5FAE;&#x4EFB;&#x52A1;&#x4E86;&#x3002;&#x65F6;&#x4EE3;&#x7684;&#x6D2A;&#x6D41;&#x554A;~</p>
<p><a href="https://github.com/vuejs/vue/blob/dev/src/core/util/next-tick.js" target="_blank">https://github.com/vuejs/vue/blob/dev/src/core/util/next-tick.js</a></p>
<p>&#x8FD9;&#x4E2A;&#x7248;&#x672C;&#x6211;&#x521A;&#x770B;&#x4E86;&#x4E00;&#x4E0B;&#xFF0C;&#x5728;&#x6700;&#x574F;&#x7684;&#x60C5;&#x51B5;&#x4E0B;&#x8FD8;&#x662F;&#x56DE;&#x9000;&#x5230;&#x5B8F;&#x4EFB;&#x52A1;&#x3002;</p>
<p>&#x6B63;&#x5219;&#x8981;&#x638C;&#x63E1;&#x5230;&#x4EC0;&#x4E48;&#x7A0B;&#x5EA6;&#x5440;&#x3002;</p>
<p>&#x4E0D;&#x600E;&#x4E48;&#x9700;&#x8981;&#x638C;&#x63E1;&#x6B63;&#x5219;</p>
<p>&#x5982;&#x679C;&#x90FD;&#x660E;&#x767D;&#x4E86;&#x81EA;&#x7136;&#x4E5F;&#x5C31;&#x662F;&#x9AD8;&#x7EA7;&#x5DE5;&#x7A0B;&#x5E08;&#x4E86;</p>
<p>&#x8FD9;&#x5C31;&#x662F;&#x6211;&#x53D1;&#x6587;&#x7AE0;&#x7684;&#x76EE;&#x7684;&#x1F604;</p>
<p>&#x8FD9;&#x4E2A;&#x662F;&#x771F;&#x7684;&#x4E0D;&#x9519;&#xFF0C;&#x8C22;&#x8C22;&#x4F5C;&#x8005;</p>
<p>&#x6211;&#x662F;&#x6398;&#x91D1;&#x7684; Yiming &#x541B;&#xFF0C;&#x5728;&#x8FD9;&#x91CC;&#x53C8;&#x89C1;&#x9762;&#x4E86;&#xFF0C;&#x8FD9;&#x4E2A;&#x70B9;&#x513F;&#x6B63;&#x5728;&#x5B66;&#x4E60; diff &#x7B97;&#x6CD5;&#x4E2D;~</p>
<p>&#x6BCF;&#x4E00;&#x9879;&#x90FD;&#x9700;&#x8981;&#x82B1;&#x65F6;&#x95F4; &#x79EF;&#x7D2F;&#x5F88;&#x91CD;&#x8981;</p>
<p>&#x4E24;&#x5E74;&#x80FD;&#x628A;&#x8FD9;&#x4E9B;&#x5168;&#x638C;&#x63E1;&#x7B97;&#x633A;&#x4E0D;&#x9519;&#x4E86;&#xFF0C;&#x53E6;&#x5916;&#x6211;&#x6700;&#x8FD1;&#x6709;&#x70B9;&#x7591;&#x60D1;&#xFF0C;&#x524D;&#x7AEF;&#x57FA;&#x4E8E; vue &#x548C; react &#x7684;&#x53D1;&#x5C55;&#xFF0C;&#x603B;&#x89C9;&#x5F97;&#x6709;&#x70B9;&#x602A;&#x602A;&#x7684;&#xFF0C;&#x5C40;&#x9650;&#xFF1F;&#x6216;&#x8005;&#x8BF4;&#x6211;&#x6BD4;&#x8F83;&#x7591;&#x60D1;&#x7A0B;&#x5E8F;&#x5458;&#x7684;&#x53D1;&#x5C55;&#x4E4B;&#x8DEF;&#x662F;&#x4EC0;&#x4E48;&#xFF08;&#x56E0;&#x4E3A;&#x6700;&#x8FD1;&#x6B63;&#x7F8E;&#x90A3;&#x4E8B;&#x5BFC;&#x81F4;&#x6211;&#x53CD;&#x601D;&#x6BD4;&#x8F83;&#x591A;&#xFF09;&#xFF0C;&#x6211;&#x4E4B;&#x524D;&#x5F97;&#x51FA;&#x7684;&#x7ED3;&#x8BBA;&#x662F;&#x4E0D;&#x7BA1;&#x6280;&#x672F;&#x5982;&#x4F55;&#xFF0C;&#x524D;&#x7AEF;&#x8FD8;&#x662F;&#x540E;&#x7AEF;&#xFF0C;&#x4E3B;&#x8981;&#x7684;&#x662F;&#x5982;&#x4F55;&#x5FEB;&#x901F;&#x79EF;&#x7D2F;&#x8D22;&#x5BCC;&#x1F600;</p>
<p>&#x8FD9;&#x4E2A;&#x597D;&#x50CF;&#x662F;&#x8001;&#x751F;&#x5E38;&#x8C08;&#x7684;&#x8BDD;&#x9898;&#x4E86;&#xFF0C;&#x5EFA;&#x8BAE;&#x641C;&#x4E00;&#x4E0B;&#x4E00;&#x4E9B;&#x8D44;&#x6DF1;&#x7A0B;&#x5E8F;&#x733F;&#x7ED9;&#x51FA;&#x7684;&#x5EFA;&#x8BAE;&#xFF0C;&#x6211;&#x4E5F;&#x8FD8;&#x5728;&#x6478;&#x7D22;&#x4E2D;&#x3002;</p>
<p>![][img-5]</p>
<h2 id="&#x611F;&#x8C22;">&#x611F;&#x8C22;</h2>
<p><a href="http://www.weqianduan.com/2018/11/28/gitbook-simple/" target="_blank">&#x5982;&#x4F55;&#x4F7F;&#x7528;Gitbook&#x7684;&#x5C0F;&#x4F8B;&#x5B50;</a></p>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                
                <a href="Base/" class="navigation navigation-next navigation-unique" aria-label="Next page: 前端基础">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"介绍","level":"1.1","depth":1,"next":{"title":"前端基础","level":"1.2","depth":1,"path":"Base/README.md","ref":"Base/README.md","articles":[{"title":"原生js系列","level":"1.2.1","depth":2,"path":"Base/README.md","ref":"Base/README.md","articles":[{"title":"类型转换","level":"1.2.1.1","depth":3,"path":"Base/手写call1.md","ref":"Base/手写call1.md","articles":[]},{"title":"EventLoop","level":"1.2.1.2","depth":3,"path":"Base/EventLoop.md","ref":"Base/EventLoop.md","articles":[]}]},{"title":"CSS系列","level":"1.2.2","depth":2,"path":"Base/CSS.md","ref":"Base/CSS.md","articles":[{"title":"布局系列","level":"1.2.2.1","depth":3,"path":"Base/布局系列.md","ref":"Base/布局系列.md","articles":[]}]}]},"dir":"ltr"},"config":{"plugins":["github","donate","splitter","-anchor-navigation-ex","-sharing","sharing-plus","-highlight","prism","toggle-chapters","-lunr","-search","search-plus"],"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"prism":{"css":["prismjs/themes/prism.css"]},"github":{"url":"https://github.com/MarioGogogo"},"splitter":{},"sharing-plus":{"qq":false,"all":["facebook","google","twitter","instapaper","linkedin","pocket","stumbleupon"],"douban":false,"facebook":true,"weibo":false,"instapaper":false,"whatsapp":false,"hatenaBookmark":false,"twitter":true,"messenger":false,"line":false,"vk":false,"pocket":true,"google":false,"viber":false,"stumbleupon":false,"qzone":false,"linkedin":false},"donate":{"alipay":"","alipayText":"支付宝打赏","button":"赏","title":"","wechat":"http://7q5c2h.com1.z0.glb.clouddn.com/wechatpay.JPG","wechatText":"微信打赏"},"fontsettings":{"theme":"white","family":"serif","size":2},"anchor-navigation-ex":{"associatedWithSummary":false,"showLevel":true,"multipleH1":true,"mode":"float","pageTop":{"showLevelIcon":false,"level1Icon":"fa fa-hand-o-right","level2Icon":"fa fa-hand-o-right","level3Icon":"fa fa-hand-o-right"}},"sharing":{"qq":false,"all":["weibo","qq","qzone","google","douban"],"douban":false,"facebook":false,"weibo":false,"instapaper":false,"whatsapp":false,"hatenaBookmark":false,"twitter":false,"messenger":false,"line":false,"vk":false,"pocket":false,"google":false,"viber":false,"stumbleupon":false,"qzone":false,"linkedin":false},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":true},"toggle-chapters":{},"search-plus":{}},"theme":"default","author":"WuXiaolong","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"👨🏽‍💻前端漫游指南","language":"zh-hans","links":{"sidebar":{}},"gitbook":"3.2.3","description":"http://h5web.cc/"},"file":{"path":"README.md","mtime":"2020-04-22T01:13:43.161Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2020-04-22T01:16:46.955Z"},"basePath":".","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="gitbook/gitbook.js"></script>
    <script src="gitbook/theme.js"></script>
    
        
        <script src="gitbook/gitbook-plugin-github/plugin.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-donate/plugin.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-splitter/splitter.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-sharing-plus/buttons.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-toggle-chapters/toggle.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-search-plus/jquery.mark.min.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-search-plus/search.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    

    </body>
</html>

